reactjs - 在 NextJs 中包含 Sass 的正确方法是什么？

Question

当我在 NextJs 中使用 Sass 文件时，我conflicting order从mini-css-extract-plugin. 冲突总是弄乱我的样式build。您可以看到以下链接中描述的错误：

https://medium.com/iryl/control-css-imports-order-for-next-js-webpack-based-production-applications-3b69765444fd

这是一篇解决此问题的文章，但它讨论了仅为一页订购 Sass 文件。当有多个页面时，我不确定如何订购。我该如何解决这个conflicting order问题？

标签： reactjswebpacksassnext.jsmini-css-extract-plugin

Answer 1

如果您使用的是 nextjs 9.3 或更高版本，您可以像使用 css 模块一样使用它。至少这是他们建议您这样做的方式。

这是一个例子。

您还可以在 Next.js 文档中查看Sass 支持。

- 更新

最好的方法是为每个组件创建一个不同的 scss 模块。它看起来像这样。

Components
├── Header   
│   ├── Header.js
│   ├── Header.module.css    
├── Footer   
│   ├── Footer.js
│   ├── Footer.module.css    
├── Nav   
│   ├── Nav.js
│   ├── Nav.module.css      

使用 css 模块的主要思想是防止您使用全局工作表。这样，css 将在组件的代码拆分上得到优化，您不必担心两次声明同一个类，每个 css 模块文件将生成一个唯一的类名。

我正在使用 css 模块开发一个项目，该项目尚未完成，但文件结构与使用 sass 几乎相同，如果需要，可以查看。

https://github.com/edgarlr/portfolio/tree/main/components