时间戳

首页 > 解决方案 > 当 CSS 模块不在同一个 CSS 文件中时，如何通过 CSS 模块识别相同的类名

reactjs - 当 CSS 模块不在同一个 CSS 文件中时，如何通过 CSS 模块识别相同的类名

问题描述

我有一个主 CSS 文件style.styl，带有容器：

.container
  // ...

我有components.styl一些 React 组件的另一个 CSS 文件，这些必须在容器内

.container
  .componentA
    // ...
  .componentB
    // ...

然后通过 Webpack 和 CSS 模块构建后，配置如下：

{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    modules: {
      localIdentName: '[name]__[local]__[contenthash:5]',
    },
  },
},

.containerin将style.styl被编译为style__container__8cc45

在将编译.container为components.stylcomponents__container__45aeb

现在如何使用 [contenthash:5] 将容器标识为同名

非常感谢

标签： reactjswebpackcss-modulesreact-css-modules

解决方案

谢谢，@lavor

我找到了问题的解决方案（可能不优雅）

// ...
loader: require.resolve('css-loader'),
options: {
  importLoaders: 1,
  modules: {
    calIdentName: '[local]__[contenthash:5]',
    getLocalIdent: (loaderContext, localIdentName, localName, options) => {
      if (!options.context) {
        options.context = loaderContext.rootContext;
      }

      let request = null;
      if (localName === 'container') {
        // do not change the value of `request` when localName is 'container'
        request = 'src/assets/css/style.styl';
      } else {
        request = path
            .relative(options.context, loaderContext.resourcePath)
            .replace(/\\/g, '/');
      }

      options.content = `${options.hashPrefix + request}+${localName}`;
      localIdentName = localIdentName.replace(/\[local\]/gi, localName);
      const hash = loaderUtils.interpolateName(
        loaderContext,
        localIdentName,
        options
      );
      return hash
        .replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
        .replace(/^((-?[0-9])|--)/, '_$1');
    },
  },
},
// ...

推荐阅读