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

Question

当我在 NextJs 中使用 Sass 文件时，我收到来自 mini-css-extract-plugin 的“conflicting order”警告。冲突总是弄乱我在 build 上的样式。可以看到下面描述的错误link:

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

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

Answer 1

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

这是一个example。

您还可以查看 Next.js 文档中的 Sass support。

--更新

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

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

使用 css 模块的主要思想是防止您使用全局 sheet。这样 css 将根据组件的代码拆分进行优化，您不必担心两次声明相同的 class，每个 css 模块文件将生成一个唯一的 class名字.

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

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

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

What is the right way to incude Sass in NextJs?

sass

reactjs

webpack

next.js

mini-css-extract-plugin