css - 在没有 React 的情况下使用 css-loader

Question

我正在使用支持 Webpack 的 CSS 模块(通过 css-loader)构建一个小型网络应用程序，没有 React。我的目标是获得 benefits of short, obfuscated CSS class names (因为我目前正在使用冗长的 BEM 类名)在我的 HTML 中通过使用 css-loader 上的 localIdentName: '[hash:base64:8]' 选项。由于我没有使用 React，所以我使用的是 不是 通过 JSX 文件或 document.write 以编程方式生成的原始 HTML。

我之前多次将 css-loader 与 React 一起使用，它最终起作用了，因为你可以在 React 文件中导入样式类名称，并使用人类可读的名称引用它们，而不管类是什么名称被 Webpack 更改为。

但是，我很困惑如何使用原始 HTML 来处理这个问题；我不能只导入样式，因为它不是 JS 文件。如果我的 HTML 中引用了一个名为 photo__caption--large 的类，并且 webpack 将类名转换为 d87sj，则 CSS 文件将显示为 d87sj 但 HTML 仍会显示 photo__caption--large。

是否有某种 HTML 文件加载器能够将文件中的类名编辑为它们的 Webpackified 等价物？或者我真的应该只将 React 与 CSS 模块一起使用吗？

Answer 1

此 github 代码可能对您有所帮助。 https://github.com/moorthy-g/css-module-for-raw-html

需要一些复杂的设置。我们需要将以下包连接在一起。
- postcss-loader
- postcss 模块
- posthtml-css-modules
- posthtml-loader

以下 postcss 配置创建模块转储文件 (./tmp/module-data.json)。

// postcss.config.js
module.exports = {
    plugins: {
    'postcss-modules': {
      getJSON: function(cssFileName, json) {
        const path = require('path'), fs = require('fs');
        const moduleFile = path.resolve('./tmp/module-data.json');
        const cssName = path.basename(cssFileName, '.css');
        const moduleData = fs.existsSync(moduleFile) ? require(moduleFile) : {};
        moduleData[cssName] = json;
        fs.existsSync('./tmp') || fs.mkdirSync('./tmp');
        fs.writeFileSync(moduleFile, JSON.stringify(moduleData));
      },
      generateScopedName: '[local]_[hash:base64:5]'
    }
  }
}

下面的 webpack 规则将 html 文件链接到模块转储文件。

{
  test: /\.html$/,
  use: [
    { loader: 'html-loader' },
    {
      loader: 'posthtml-loader',
      options: {
        plugins: [
          require('posthtml-css-modules')('./tmp/module-data.json')
        ]
      }
    }
  ]
}

最后，HTML 使用 css-module 属性代替 class

<div css-module="main.container">
  <h2 css-module="main.title">Title for the page</h2>
</div>

有问题请告诉我