Question

我对next.js很新。用它来渲染我的应用程序。

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

Answer 1

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

3个简单步骤：

安装next-css插件：

npm install --save @zeit/next-css

在根目录中创建next.config.js并包含以下内容：

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

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

现在您应该能够像这样从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

自Next.js 9.2起，不再需要使用next-css和withCSS或withStyle。 Next.js本机处理CSS导入。由于这些可能伴随Webpack问题（请参见此问题：Having trouble importing CSS in NextJs），因此，这是使用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的任何提及，因为它们可能会引起某些错误。

Answer 4

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

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

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

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

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

Answer 5

自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。一切顺利。

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

5 个答案: