与NextJS和Next-CSS交互：您可能需要适当的加载器来处理此文件类型

Question

使用NextJS构建一个React-App 要使用css文件，我使用next-css plugin来做到这一点。但是，当我构建我的应用程序时，出现以下错误：

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

我的next.config.js文件如下所示：

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  cssModules: false,
})

我导入并在组件中使用.css文件，如下所示：

import '../style.css'
export default () => <div className="example">Hello World!</div>

我的css文件看起来像这样：

.example {
  color: red;
 }

我的问题在哪里？谁能帮我解决这个问题？

Answer 1

我解决了问题。在我next.config.js我使用多个插件。我的错误是我写了几句module.exports话。就我而言，解决方案如下所示：

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

module.exports = withImages(withCSS());

Answer 2

在你的 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+

背景： 我花了几个小时试图简单地导入作为 node_module 安装的 CSS，各种解决方案大多是 hacky 解决方法，但如上所示，有一个简单的解决方案。它由核心团队成员之一提供：https : //spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Answer 3

我不确定您遇到什么问题，但我只是按照docs示例进行操作：

1安装了next-css npm install --save @zeit/next-css

2已创建 next.config.js

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

3 style.css在根文件夹中创建文件

.example {
  font-size: 50px;
  background-color: red;
}

4创建一个包含样式的测试页

import '../style.css';

export default () => <div className="example">Hello World!</div>;

，结果表明这

我有以下依赖

"@zeit/next-css": "^1.0.1",
"next": "^7.0.0",
"react": "^16.5.2",
"react-dom": "^16.5.2"

希望这对您有所帮助！