Question

我正在使用支持Webpack的CSS模块（通过css-loader）和无 React构建一个小型Web应用程序。我的目标是通过使用css-loader上的<script type="text/javascript"> var error = <%= error %>; if(error!=null) { showAlert(error.message); } showAlert = function(err) { alert('error: ' + err); } </script>选项在HTML中获取benefits of short, obfuscated CSS class names（因为我目前正在使用冗长的BEM类名）。由于我没有使用React，所以我正在使用不是通过JSX文件或localIdentName: '[hash:base64:8]'以编程方式生成的原始HTML。

我以前在React大量使用css-loader，它最终可以工作，因为您可以将样式类名称导入React文件中，并使用易于理解的名称引用它们，而与任何类别无关Webpack将名称更改为。

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

是否存在用于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>

让我知道您是否有任何问题

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

1 个答案: