如何在 Next.js 配置中禁用 css 模块文件后缀“.module”？

Question

我100%用css模块，为什么每次都在文件名里写.module？如果我手动配置 webpack 我会更改这个后缀，但是在 next.js?

中我该怎么做

Answer 1

我遇到了同样的问题，几个小时后，我找到了解决方案。如果您想在 100% 的情况下使用 css-modules，您必须在 next.config.js:

中编辑 webpack 配置

我做的是这个代码：

const isTwoRegexEqual = (x, y) => {
   return (
      x instanceof RegExp &&
      y instanceof RegExp &&
      x.source === y.source &&
      x.global === y.global &&
      x.ignoreCase === y.ignoreCase &&
      x.multiline === y.multiline
   );
}

const getConfigToAcceptSassFilesWithoutModuleSuffix = (config) => {
   return {
      ...config,
      module: {
         ...config.module,
         rules: config.module.rules.map((rule) => {
            if (rule.oneOf) {
               return {
                  ...rule,
                  oneOf: rule.oneOf.map((loaderSettings) => {
                     if (
                        (!Array.isArray(loaderSettings.test) && isTwoRegexEqual(loaderSettings.test, /\.module\.(scss|sass)$/))
                        || (Array.isArray(loaderSettings.test) && loaderSettings.test.filter((test) => isTwoRegexEqual(test, /(?<!\.module)\.(scss|sass)$/ )).length > 0)
                     ) {
                        return {
                           ...loaderSettings,
                           test: /\.(scss|sass)$/,
                        }
                     }

                     return loaderSettings;
                  })
               }
            }
            return rule;
         })
      }
   }
};

如何在 Next.js 配置中禁用 css 模块文件后缀“.module”？

How to disable css module file suffix ".module" in Next.js config?

webpack

css-modules

next.js