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

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

使用@webdeb/next-styles 代替@zeit/next-css。然后您可以正常导入任何节点module样式。

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

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

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

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

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

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

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

从 Next.js 9.2 开始，不再需要使用next-cssandwithCSS或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它们可能会导致一些错误的发生。