在 JavaScript / TypeScript 文件中使用 [hash:base64:5]

Question

我在带有 Webpack 的 Angular 项目中使用 CSS 模块。我已经用postcss-modules转换了.css和.scss文件中的类名。

然后使用posthtml-css-modules我更改了 html 元素中 class 属性的值，用于由 postcss-modules.

我可以说一切正常。

现在，我有一个新的挑战要解决。

Angular 有一项功能，允许您class 根据条件动态更改html 元素中的值：

https://angular.io/api/common/NgClass

例如，我可以这样做：

<div [className]="myVar ? 'myClass1' : 'myClass2' " >

如果myVar = true，则 html 元素将是：

<div class="myClass1" >

如果myVar = false，则 html 元素将是：

<div class="myClass2" >

就像我不知道myVar在编译期间的值是什么（因为 的值myVar取决于用户操作）我无法设置值<div css-module="myClass1" > 或<div css-module="myClass2" >为了散列myClass1or的类名myClass2。

但是（这是我的解决方案）...

如果我可以调用相同的函数[hash:base64:5]（https://github.com/css-modules/postcss-modules#generating-scoped-names）

我可以创建一个函数，它接收一个字符串作为参数，并将类名作为散列返回。

它会是这样的：

<div [className]="setMyClassNameInHash(myVar)">

然后在javascript中：

function setMyClassNameInHash(condition) {
      return  condition ? doHash64('myClass1') : doHash64('myClass1');
}

doHash64()将是采用字符串并使用[hash:base64:5].

总之，我的问题是：

¿如何在javascript文件中调用与[hash:base64:5]相同的函数？

谢谢！！！！

Answer 1

您需要将模板步骤集成到构建过程中。该插件将类名及其映射名称导出到 json 文件，以便您可以从原始文件中查找散列类名。

编辑：由于内置模板仅适用于单个类名，并且似乎不支持替换角度属性等内容中的类名，因此您可以使用像 lodash 这样的模板库自己进行模板化。如果您已经在使用 grunt 或 gulp，我建议您使用它们的模板任务而不是这种手动方式，因为它们可以为您做很多事情，例如支持多个文件。

在您的 html 中，您可以使用 lodash 分隔符来获取散列类名称，例如：

<div [className]="myVar
     ? '<%= getHashedClass('myClass1') %>'
     : '<%= getHashedClass('myClass2') %>' " >

您的节点构建脚本可能如下所示：

var fs = require('fs');

postcss([
  require("postcss-modules")({
    // Callback to get hashed class names
    getJSON: function(cssFileName, classNames, outputFileName) {
      var filePath = '/path/to/outputDir/file.html';

      // Function to lookup hashed class names
      var getHashedClass = function(unhashedClass) {
        return classNames[unhashedClass];
      }

      // Read your html file as a string
      var html = fs.readFileSync(path),

      // Use lodash to template it, passing the class lookup function
      var compiled = _.template(html);
      var templated = compiled({
        getHashedClass: getHashedClass
      });

      // Write the templated html
      fs.writeFileSync(path, templated);
    }
  })
]);