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

Question

我正在使用支持 Webpack 的 CSS 模块（通过 css-loader）构建一个小型 Web 应用程序，但不使用React。我的目标是通过使用 css-loader 上的选项，在 HTML 中获得简短、模糊的 CSS 类名（因为我目前使用冗长的 BEM 类名）的好处localIdentName: '[hash:base64:8]'。由于我没有使用 React，所以我正在使用原始 HTML，该 HTML 不是通过JSX 文件或document.write.

我之前在 React 中使用过很多次 css-loader ，它最终是有效的，因为你可以在 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-modules
- 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>

如果您有任何问题请告诉我