reactjs - 配置 next.config 文件-6ren

reactjs - 配置 next.config 文件

转载作者：行者123 更新时间：2023-12-05 01:15:41

25

4

我正在使用 Next.js 并想添加 react-semantic-ui , 使用他们的登录组件之一。

在前端我收到这个错误: 编译失败

./node_modules/semantic-ui-css/semantic.min.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

这是登录组件:

import React from 'react'
import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react'

const Login = () => (
  /* login JSX markup */
)

export default Login

这是我的 next.config.js

  module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.s[a|c]ss$/,
        loader: 'sass-loader!style-loader!css-loader'
      },
      {
        test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000,
            publicPath: "./",
            outputPath: "static/",
            name: "[name].[ext]"
          }
        }
      },
      {
        test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
        loader: require.resolve('file-loader'),
        options: {
          name: '/static/media/[name].[hash:8].[ext]'
        }
      }
    )
    return config
  }
}

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

这是我的 package.js

  {
  "name": "create-next-example-app",
  "scripts": {
    "dev": "nodemon server/index.js",
    "build": "next build",
    "start": "NODE_ENV=production node server/index.js"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "body-parser": "^1.18.3",
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "mongoose": "^5.4.19",
    "morgan": "^1.9.1",
    "next": "^8.0.3",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.86.0"
  },
  "devDependencies": {
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "node-sass": "^4.11.0",
    "nodemon": "^1.18.10",
    "sass-loader": "^7.1.0",
    "url-loader": "^1.1.2"
  }
}

我在某处读到你必须包含一个 _document.js在页面目录中。

// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file

// ./pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
            <link rel='stylesheet' 
                  href='//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css'
            />
        </Head>
        <body className="custom_class">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

真的有这么难吗？

更新

还有另一种方法可以让它发挥作用。当您启动 Next 应用程序时，您会得到一个组件文件夹，其中包含 head.js和一个 nav.js文件。

head.js 文件最终类似于 <head></head>在 HTML 中标记.或者我应该说这就是 head.js 的意思编译为。无论如何，您可以在其中添加:

<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
/>

这会奏效。

但正如我所说，您仍然不能像这样导入模块:

import 'semantic-ui-css/semantic.min.css'

最佳答案

如果有人使用 next-compose-plugins 并出现上述错误，这里有一个修复方法:

const withCSS = require('@zeit/next-css');
const withImages = require('next-images');
const withPlugins = require('next-compose-plugins');

// fix: prevents error when .css files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.css'] = (file) => {};
}

const nextConfig = {
  target: 'server',
  webpack: (config, { dev }) => {
    config.module.rules.push({
      test: /\.(raw)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      use: 'raw-loader'
    });

    return config;
  }
};

module.exports = withPlugins([withImages, withCSS({target: 'serverless',
  webpack (config) {
    config.module.rules.push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 8192,
          publicPath: '/_next/static/',
          outputPath: 'static/',
          name: '[name].[ext]'
        }
      }
    })
    return config
  }})], nextConfig);

关于reactjs - 配置 next.config 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55309300/

25

4

0

文章推荐： Python Tkinter 如何使文本框滚动

文章推荐： django - 如何使用 django 保护文件上传

文章推荐： reactjs - 如何在语义-ui-react 中创建完全受控的下拉菜单

文章推荐： c# - 使用我的存储库时无法解析类型的服务

url - 文件 :/, 文件 ://, 文件:///和有什么区别
今天我在一个 Java 应用程序中看到了几种不同的加载文件的方法。文件:/ 文件:// 文件:/// 这三个 URL 开头有什么区别？使用它们的首选方式是什么？非常感谢斯特凡最佳答案 file
EDI X12 文件 - 文件
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
c# - 从 javascript 文件(.js 文件)调用 C# 函数(.cs 文件)
我有一个 javascript 文件，并且在该方法中有一个“测试”方法，我喜欢调用 C# 函数。 c# 函数与 javascript 文件不在同一文件中。它位于 .cs 文件中。那么我该如何管理 j
java - 文件.canWrite();文件.canRead();文件.canExceute();尽管我的文件/目录没有访问权限，但始终返回 true
需要检查我使用的文件/目录的权限 //filePath = path of file/directory access denied by user ( in windows ) File fil
intellij-idea - 将外部 java 文件(*.java 文件，而不是 jar 文件)添加到 Intellij 中的项目
我在一个目录中有很多 java 文件，我想在我的 Intellij 项目中使用它。但是我不想每次开始一个新项目时都将 java 文件复制到我的项目中。我知道我可以在 Visual Studio 和
linux - 我不小心复制了一个 bash 文件，并将其替换为 Linux Mint 中的 .bashrc 文件。我该如何检索 .bashrc 文件？
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎不是关于 a specific programming problem, a software
php - 在 Twig 文件 B 中渲染 Twig 文件 A 但仅在查看 Twig 文件 C 时？
我有 3 个组件的 Twig 文件: 文件 1: {# content-here #} 文件 2: {{ title-here }} {# content-here #}
linux - 如何在 Linux 中将 .c 文件转换为 .so 文件？我有 .c 文件。并需要 Linux 命令将其转换为 .so 文件
我得到了 mod_ldap.c 和 mod_authnz_ldap.c 文件。我需要使用 Linux 命令的 mod_ldap.so 和 mod_authnz_ldap.so 文件。最佳答案从 c
javascript - 文件 .htc 文件 - 我需要网络服务器吗？
我想使用PIE在我的项目中使用 IE7。但是我不明白的是，我只能在网络服务器上使用 .htc 文件吗？我可以在没有网络服务器的情况下通过浏览器加载的本地页面中使用它吗？我在 PIE 的文档中看到
Java docker 文件。构建并测试还是只运行 jar 文件？
我在 CI 管道中考虑这一点，我应该首先构建和测试我的应用程序，结果应该是一个 docker 镜像。我想知道使用构建环境在构建服务器上构建然后运行测试是否更常见。也许为此使用构建脚本。最后只需将 j
C++ 文件 I/O 我无法读取 .dat 文件
using namespace std; struct WebSites { string siteName; int rank; string getSiteName() {
c++ - 尽管链接了库文件夹中的 .so 文件，但缺少 .h 文件
我是 Linux 新手，目前正在尝试使用 ginkgo USB-CAN 接口(interface) 的 API 编程功能。为了使用 C++ 对 API 进行编程，他们提供了库文件，其中包含三个带有 .
C 文件 I/O，使用 TXT 文件
我刚学C语言，在实现一个程序时遇到了问题将 test.txt 文件作为程序的输入。 test.txt 文件的内容是: 1 30 30 40 50 60 2 40 30 50 60 60 3 30 20
networking - 如何连接两个 tcpdump 文件(pcap 文件)
如何连接两个tcpdump文件，使一个流量在文件中出现一个接一个？具体来说，我想“乘以”一个 tcpdump 文件，这样所有的 session 将一个接一个地按顺序重复几次。最佳答案 mergeca
video - 修复损坏的 .MP4 文件。这可能是一个 3gp 文件
我有一个名为 input.MP4 的文件，它已损坏。它来自闭路电视摄像机。我什么都试过了，ffmpeg , VLC 转换，没有运气。但是，我使用了 mediainfo和 exiftool并提取以下信息
android - 如何提取 ISO 文件，然后将其重新打包成可用的 ISO 文件？
我想做什么？我想提取 ISO 文件并编辑其中的文件，然后将其重新打包回 ISO 文件。 (正如你已经读过的) 我为什么要这样做？我想开始修改 PSP ISO，为此我必须使用游戏资源、 Assets
compression - 给定一个解压缩的 gzip 文件，有没有办法重新创建准确的原始 gzip 文件？
给定一个 gzip 文件 Z，如果我将其解压缩为 Z'，有什么办法可以重新压缩它以恢复完全相同的 gzip 文件 Z？在粗略阅读了 DEFLATE 格式后，我猜不会，因为任何给定的文件都可能在 DEF
sql-server - 带附件的数据库电子邮件(excel 文件/pdf 文件)？
我必须从数据库向我的邮件 ID 发送一封带有附件的邮件。 EXEC msdb.dbo.sp_send_dbmail @profile_name = 'Adventure Works Admin
audio - 如果我有 CUE 文件，如何拆分 M4B 文件？
我有一个大的 M4B 文件和一个 CUE 文件。我想将其拆分为多个 M4B 文件，或将其拆分为多个 MP3 文件(以前首选)。我想在命令行中执行此操作(OS X，但如果需要可以使用 Linux)，而
ios - 是否有编译器标志以便链接器警告我这个？ .h 文件，没有 .m 文件
快速提问。我有一个没有实现文件的类的项目。然后在 AppDelegate 我有: #import "AppDelegate.h" #import "SomeClass.h" @interface A

首页

博学

6Ren·AI

商城

reactjs - 配置 next.config 文件