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

Question

我正在构建一个具有启用Webpack的CSS模块（通过css-loader）并且没有 React的小型Web应用程序。 我的目标是通过在CSS加载器上使用localIdentName: '[hash:base64:8]'选项，在HTML中获得简短的，混淆的CSS类名 （因为我目前正在使用冗长的BEM类名）的localIdentName: '[hash:base64:8]' 。 由于我没有使用React，所以我正在处理未通过JSX文件或document.write以编程方式生成的原始HTML。

之前我已经将CSS加载器与React一起使用过，它最终可以工作，因为您可以将样式类名称导入React文件中，并使用易于理解的名称引用它们，而无需更改任何类名称。到Webpack。

但是， 当使用原始HTML时 ，我感到困惑。 我不能仅导入样式，因为它不是JS文件。 如果我有一个在我的HTML中引用的名为photo__caption--large的类，并且webpack将类名转换为d87sj ，则CSS文件将显示d87sj但HTML仍将显示photo__caption--large 。

HTML文件是否有某种加载程序，可以将文件中的类名称编辑为其Webpackified等效项？ 还是我真的应该只将React与CSS模块一起使用？

Answer 1

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

这将启用所有名称翻译，而不会启用所有名称翻译。 如果要编写静态HTML，Webpack的目标是什么？

Webpack有几个静态站点生成器 ，它们可让您获得所需的结果，但它们仍在构建HTML文件。

或者，您可以查看类似于React（Vue或Angular）的工具，这些工具允许您以纯HTML格式编写所有“模板”。 例如，在Vue中，您仅可以编写HTML（通过javascript进行编译），而无需使用其任何数据绑定或路由。

Answer 2

这个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>

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