如何仅为 .mod.css 文件启用 css 模块？下一页答案

【问题标题】：How to enable css modules only for .mod.css files ? Nextjs如何仅为 .mod.css 文件启用 css 模块？下一页
【发布时间】：2020-02-18 08:00:10
【问题描述】：

我在我的项目中使用了两种样式文件.css 文件和.mod.css 文件。我只想为扩展名为 *.mod.css 的文件启用 CSS 模块。

我的next.config.js 文件

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
      cssModules:true,
      cssLoaderOptions: {
        localIdentName: "[local]_[hash:base64:5]",
      },
      webpack(config, options) {
        config.module.rules.push({
          test: /\.mod.css$/,
        })
        return config
      }
})

【问题讨论】：

标签： webpack next.js css-modules

【解决方案1】：

事实上，withCss next 的插件定义了你需要修改它而不是添加一个新的 css 加载器。

// next.config.js

const withCSS = require('@zeit/next-css');

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    localIdentName: '[local]_[hash:base64:5]',
  },
  webpack(config, options) {

    config.module.rules.forEach(rule => {
      if (rule.test.toString().includes('.css')) {
        rule.rules = rule.use.map(useRule => {
          if (typeof useRule === 'string') {
            return {
              loader: useRule,
            };
          }
          if (useRule.loader.startsWith('css-loader')) {
            return {
              oneOf: [
                {
                  test: /\.mod\.css$/,
                  loader: useRule.loader,
                  options: {
                    ...useRule.options,
                    modules: true,
                  },
                },
                {
                  loader: useRule.loader,
                  options: {
                    ...useRule.options,
                    modules: false,
                  },
                },
              ],
            };
          }

          return useRule;
        });

        delete rule.use;
      }
    });    


    return config;
  },
});

此代码查找 withCss 配置，并修改规则以使用 webpack 的 oneOf 选项。

【讨论】：

【解决方案2】：

这是我在next.config.js 中的解决方案。它允许使用 css 模块和全局样式表，并且是可定制的。

这需要一个名为components/Layout/index.module.scss 的文件，其中包含一个名为.container 的类，并将其转换为类名Layout__container--cF6H8。显然您的文件结构或需求可能不同，但这是灵活且可定制的

const crypto = require('crypto');

...

const nextConfig = {
  cssLoaderOptions: {
    getLocalIdent: (loaderContext, localIdentName, localName, options) => {
      const filePath = loaderContext.resourcePath;
      const fileBaseName = path.basename(filePath);

      if (/\.module\.scss$/.test(fileBaseName)) {
        const modulePathParts = filePath.split('/');

        const moduleName = modulePathParts[modulePathParts.length - 2];

        return `${moduleName}__${localName}--${crypto
          .createHash('sha1')
          .update(filePath)
          .digest('base64')
          .slice(0, 5)}`;
      }

      return localName;
    },

    ...

【讨论】：