reactjs - 从 Next JS 中的节点模块导入 css 文件？

Question

我很陌生next.js。将它用于我的应用程序的服务器端渲染。

根据文档，您可以从应该位于根目录的静态文件夹中导入 css 文件，但我想从 node_modules 导入 css，因为我已经扩展了引导程序并创建了自己的包。

Answer 1

这是您可能正在寻找的解决方案：

3个简单的步骤：

1. 安装 next-css 插件：

npm install --save @zeit/next-css

2. 在你的根目录下创建 next.config.js ，内容如下：

// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

3. 现在你应该可以像这样从 node_modules 导入样式表了：

import 'bootstrap-css-only/css/bootstrap.min.css';

注意：使用 Next v 8+

其他解决方案是 next-css 可用之前的解决方法，但如上所示，现在有一个简单且受支持的解决方案。它由核心团队成员之一提供：https ://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Answer 2

使用@webdeb/next-styles 而不是@zeit/next-css。然后您可以正常导入任何节点模块样式。

    const withStyles = require('@webdeb/next-styles')

    module.exports = withStyles({
      sass: true, // use .scss files
      modules: true, 
    })

Answer 3

从 Nextjs 9.5.4 开始，您现在可以将 css 文件直接从 node_modules 导入到您需要它的组件中（不需要在 _app.js 中）。像这样

import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

有关更多信息，请参阅此处的文档 - https://nextjs.org/docs/basic-features/built-in-css-support。一切顺利。

Answer 4

更新：如果您在将普通 css 导入组件时遇到任何问题，请按照此示例进行操作。

除此之外没有区别。如果您从静态文件夹导入，地址类似于：

import stylesheet from '../static/css/index.css'

现在，如果您想从节点模块（例如 rc-slider 包）导入 css，它将是：

import rcstyle from 'rc-slider/assets/index.css';

Answer 5

从 Next.js 9.2 开始，不再需要使用next-cssand withCSSor withStyle。Next.js 原生处理 CSS 导入。由于这些可能伴随 Webpack 问题（请参阅此问题：在 NextJs 中导入 CSS 时遇到问题），这是使用 webpack 配置加载器的方法。在您的终端中：

npm install file-loader --save-dev

npm install url-loader --save-dev

然后用以下内容替换（或完成）您的next.config.js文件：

module.exports = {
    cssModules: true,
    webpack: (config, options) => {
        config.node = {
            fs: "empty",
        };
        config.module.rules.push({
            use: [
                options.defaultLoaders.babel,
                {
                    loader: "url-loader?limit=100000",
                },
                {
                    loader: "file-loader",
                },
            ],
        });
        return config;
    },
};

不要忘记删除任何提及withCSS，withStyle或者next-css因为它们可能会导致一些错误发生。