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

Question

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

以编程方式生成的

我之前在 React 中使用过很多 css-loader，它最终起作用了，因为你可以在 React 文件中导入样式 class 名称并使用人类可读的名称，无论 Webpack 将 class 名称更改为什么。

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

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

Answer 1

我对Webpack,CSSModules,&CSS-Loader的理解是整点就是用javascript生成文件。

这会启用所有的名称翻译，什么都不会。如果您正在编写静态 HTML?

，您使用 Webpack 的目标是什么

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

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

Answer 2

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

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

以下 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>

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

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

Using css-loader without React

css

bundling-and-minification

webpack

css-modules

css-loader