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

Question

我在 100% 的情况下都使用 css 模块，那为什么每次都在文件名中写上 .module 这个词呢？如果我手动配置 webpack，我会更改这个后缀，但是在 next.js 中我该怎么做呢？

标签： webpacknext.jscss-modules

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;
         })
      }
   }
};