javascript - 使用[哈希:base64:5] in JavaScript/TypeScript file

Question

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

然后用posthtml-css-modules我已经更改了 html 元素中类属性的值，以获取由 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" >为了散列 myClass1 的类名或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 文件，以便您可以从原始文件中查找散列的类名。

编辑:由于内置模板仅适用于单个类名，并且似乎不支持替换 Angular 属性等内容中的类名，因此您可以使用模板库自己进行模板化就像洛达什一样。如果您已经在使用 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);
    }
  })
]);