Next.js：如何更改 CSS 模塊類 output 格式？

Question

我是NextJS ，我需要將 CSS class prefix + suffix更改為以下格式：

<li class="desktop__menu-item--2feEH"></li>
<li class="desktop__menu-item--2feEH"></li>
<li class="desktop__menu-item--2feEH"></li>
<li class="desktop__menu-item--2feEH"></li>

如何將component.module.css 8CBA22E28EB17B5F5C6AE2A266AZ CSS 類更改為[path][name]__[local]--[hash:base64:5]的格式，有人可以解釋一下嗎？

我需要一個config.js文件嗎？ 我正在使用Next.js v10.0.9

Answer 1

對於 Next.js 版本 >= 12

接受的答案僅適用於版本 < 12 的 Next.js。

const loaderUtils = require('loader-utils')

const regexEqual = (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
  )
}

/**
 * Generate context-aware class names when developing locally
 */
const localIdent = (loaderContext, localIdentName, localName, options) => {
  return (
    loaderUtils
      .interpolateName(loaderContext, btoa(unescape(encodeURIComponent(localName))), options)
      // Webpack name interpolation returns `about_about.module__root` for
      // `.root {}` inside a file named `about/about.module.css`. Let's simplify
      // this.
      .replace(/\.module_/, '_')
      // Replace invalid symbols with underscores instead of escaping
      // https://mathiasbynens.be/notes/css-escapes#identifiers-strings
      .replace(/[^a-zA-Z0-9-_]/g, '_')
      // "they cannot start with a digit, two hyphens, or a hyphen followed by a digit [sic]"
      // https://www.w3.org/TR/CSS21/syndata.html#characters
      .replace(/^(\d|--|-\d)/, '__$1')
  )
}

function cssLoaderOptions(modules) {
  const { getLocalIdent, ...others } = modules // Need to delete getLocalIdent else localIdentName doesn't work
  return {
    ...others,
    getLocalIdent: localIdent,
    mode: 'local',
  }
}

const path = require('path')
module.exports = {
  webpack: config => {
    config.resolve.modules.push(path.resolve('./'))
    const oneOf = config.module.rules.find((rule) => typeof rule.oneOf === 'object')
   
    if (oneOf) {
      // Find the module which targets *.scss|*.sass files
      const moduleSassRule = oneOf.oneOf.find(
        (rule) => regexEqual(rule.test, /\.module\.(scss|sass)$/) //highlight-line
      )
      
      if (moduleSassRule) {
        // Get the config object for css-loader plugin
        const cssLoader = moduleSassRule.use.find(
          ({ loader }) => loader.includes('css-loader') //highlight-line
        )
        console.log(cssLoader,"cssloader")
        if (cssLoader) {
          cssLoader.options = {
            ...cssLoader.options,
            modules: cssLoaderOptions(cssLoader.options.modules), //highlight-line
           
          }
        }
      }
    }

  return config

  },

  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  }
}

Answer 2

Next.js 尚未提供修改css-loader選項的內置方法。

但是，您仍然可以通過在 next.config.js 中自定義 webpack 配置來做到這next.config.js 。 您需要通過每個css-loader模塊加載器手動 go 並添加所需的localIdentName 。

// next.config.js

module.exports = {
    webpack: (config) => {
        const rules = config.module.rules
            .find((rule) => typeof rule.oneOf === 'object')
            .oneOf.filter((rule) => Array.isArray(rule.use));

        rules.forEach((rule) => {
            rule.use.forEach((moduleLoader) => {
                if (moduleLoader.loader.includes('css-loader') && !moduleLoader.loader.includes('postcss-loader')) {
                    delete moduleLoader.options.modules.getLocalIdent;
                    moduleLoader.options = {
                        ...moduleLoader.options,
                        modules: {
                            ...moduleLoader.options.modules,
                            localIdentName: '[path][name]__[local]--[hash:base64:5]'
                            // You can also add other css-loader options here
                        }
                    };
                }
            });
        });

        return config;
    }
};