0

我试图让 CSS 模块在不使用内联模板的情况下与 Angular 2 一起工作。官方样式指南还建议当您有超过 3 行标记时不要使用内联模板。所以我的想法是使用 and 的组合，lodash-templates但file-loader我不确定. 这就是我希望我的组件看起来像的样子：lodash-template-loaderfile-loader

import {Component} from '@angular/core';

var styles = require('./foo.css');

@Component({
    'selector': 'my-component',
    'templateUrl': require('./foo.html')
})
export class MyComponent {

}

我知道这不会起作用lodash-template-loader，因为例如ejs-loader的输出是一个函数，必须使用将用于编译模板的数据来调用它。我想styles在我的模板中使用，然后喜欢：

<div class="<%= styles.root %>"></div>

所以基本上我想编译这个 usingh ejs-loader，然后将它传送到 ，file-loader以便我得到单独的 html 文件。我不知道如何实现这一目标。我的意思是上面只是一个想法，但我不知道如何编译模板，然后将其通过管道输入，file-loader因为这仅适用于require语句。有任何想法吗？

根据ejs-loader我必须执行以下操作来编译模板的文档：

var template = require("ejs!./foo.html");
template(styles);

我想该template函数然后将模板作为字符串返回。但是我怎么知道从中创建一个单独的 html 呢？我还需要file-loader吗？

编辑

因此，一个解决方案可能是实现一个接受文件和样式对象的自定义加载器。然后加载器返回一个可以传递给file-loader. 这里的问题是，如何将样式对象传递给加载器？以及如何将模板字符串转换为filer-loader可以读取的格式？

4

1 回答 1

0

我能够在 Angular 8 应用程序中实现CSS 模块（也可以在 Angular 7 或更高版本中实现）。

我的解决方案是自定义构建（感谢@angular-builders/custom-webpack）并使用postcss-modules和posthtml-css-modules。

postcss-modules散列所有样式，然后posthtml-css-modules用散列的类名替换 html 文件上的类名。

我在这里记录了我的解决方案：

于 2020-07-22T22:12:02.887 回答