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

我不确定您遇到什么问题，但我只是遵循docs example：

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>;

，结果显示this

我具有以下依赖性

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

希望这对您有所帮助！

Answer 3

在您的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，各种解决方案大多都是棘手的解决方法，但是如上所示，有一个简单的解决方案。它由以下核心团队成员之一提供：https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f