使用 NextJS 和 Next-CSS 做出反应：您可能需要适当的加载器来处理这种文件类型

Posted 2023-02-22

【中文标题】使用 NextJS 和 Next-CSS 做出反应：您可能需要适当的加载器来处理这种文件类型

【英文标题】：React with NextJS and Next-CSS: You may need an appropriate loader to handle this file type

【发布时间】：2019-03-03 10:45:11

【问题描述】：

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

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

【问题讨论】：

能否添加您的 CSS 文件内容？

@yuyokk 感谢您的回答......我在那里发布的 CSS 规则并不重要。错误总是出现在

【参考方案1】：

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

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

module.exports = withImages(withCSS());

【讨论】：

我可以确认，这适用于 next.js 版本 9

添加这个插件确实有效。确认的。下一个 9.1.1

这对我来说很有效，可以将 CSS 和 SASS 一起添加，例如； withCSS(withSass())

【参考方案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

【参考方案3】：

我不确定你有什么问题，但我只是关注了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"

希望对你有所帮助！

【讨论】：

感谢您的回复。你能告诉我你这个应用程序的结构吗？也许是我的错。

当然，这里是github.com/yuyokk/nextjs-css-basic-usage-example

关于如何使用它的任何想法，包括额外的 Next 配置？

@AmyPellegrini 你的意思是什么配置？能举个例子吗？

我注意到有很多插件可以使用柯里化模式扩展配置，但有时要遵循的语法或模式并不直接可用，例如，我正在做一个项目，我们使用withCSS、withPlugins、withConfig 函数（从@zeit/next-css 和类似插件导入），但我不得不花一些时间让它们组合起来工作。不管怎样，现在已经解决了！不过还是谢谢。