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

Question

我正在使用 Webpack 的 Angular 项目中使用 CSS 模块。我已经用 postcss-modules.

转换了 .css 和 .scss 文件中的 class 名称

然后用 posthtml-css-modules 我更改了 html 元素中 class 属性的值，因为他的散列值由 postcss-modules 定义。

我可以说一切正常。

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

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

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 的 class 个名称。

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

如果我可以调用与 [hash:base64:5] (https://github.com/css-modules/postcss-modules#generating-scoped-names)

相同的函数

我可以创建一个函数，它接收一个字符串作为参数，return class 名称作为散列。

会是这样的：

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

然后在 javascript:

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

doHash64() 将是一个函数，它接受一个字符串和 return 使用 [hash:base64:5].

的散列

总之，我的问题是：

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

谢谢!!!!

Answer 1

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

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

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

<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);
    }
  })
]);

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

Use [hash:base64:5] in JavaScript / TypeScript file

javascript

postcss

css-modules

css-loader

angular