修复 nextjs 组件级 scss 问题

Question

我正在将普通的 react 应用转换为下一个 js，

之前我只是使用导入 scss 文件

import from '.componentName.scss'

但现在我必须使用导入

import style from 'componentName.module.scss

因此我必须更改很多代码，因为这是以前完成的项目， 有什么方法可以配置允许像以前一样导入scss的nexjs

Answer 1

我不知道它是否会起作用，但您可以使用 https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config 在 nextjs 中创建自定义 webpack 配置。除此之外，您还可以定义样式规则。

...
rules: [
  {
    test: /\.s?css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true
        }
      },
      'sass-loader',
    ],
    include: /\.s?css$/
  },
],

使用它我很确定您应该能够覆盖它搜索 *.module 文件并将它们包含在 css 包中的方式。

注意不要只是直接复制该代码，确保它确实可以工作并根据您的需要进行配置，这只是为了参考。