使用NextJS构建React-App i。要使用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;
}
我的问题在哪里?谁能帮我修一下吗?
4条答案
按热度按时间syqv5f0l1#
我解决了问题。在我的
next.config.js
中,我使用了多个插件。我的错误是我写了几个module.exports
语句。在我的例子中,解决方案看起来像这样:lsmd5eda2#
在接下来的.config.js中尝试:
现在你应该可以像这样从node_modules导入样式表了:
**背景:**我花了几个小时试图简单地导入一个安装为node_module的CSS,各种解决方案大多是黑客的变通方法,但如上所示,有一个简单的解决方案。它是由核心团队成员之一提供的:https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f
pjngdqdw3#
我不知道你有什么问题,但我只是按照docs example:
1已安装next-css
npm install --save @zeit/next-css
2已创建
next.config.js
3在根文件夹中创建
style.css
文件4创建了一个包含样式的测试页面
结果显示this
我有以下依赖项
希望这对你有一点帮助!
woobm2wo4#
已经过了很长时间了,但也许这会对某人有所帮助。我在NextJS中添加视频时遇到了同样的问题。
首先你应该安装file-loader
然后我修改了我的next.js.js文件,如下所示:
这些步骤解决了我的问题。