使用没有React的css-loader

Question

我正在构建一个支持Webpack的CSS模块（通过css-loader）并且没有React的小型Web应用程序。我的目标是通过在css-loader上使用benefits of short, obfuscated CSS class names选项在我的HTML中获取localIdentName: '[hash:base64:8]'（因为我目前正在使用冗长的BEM类名）。由于我没有使用React，我正在使用原始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>

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

Answer 2

我对Webpack，CSS模块和CSS-Loader的理解是，整个观点是使用javascript来生成文件。

这样可以进行所有名称翻译，而不是。如果您正在编写静态HTML，那么Webpack的目标是什么？

Webpack有几个static site generators可以让你得到你想要的结果，但是他们仍在构建HTML文件。

或者，您可以查看类似于React（Vue或Angular）的工具，它们允许您以直接HTML编写所有“模板”。例如，在Vue中，您只需编写HTML（从javascript编译），而无需使用任何数据绑定或路由。