Question

我试图让CSS模块使用Angular 2而不使用内联模板。官方样式指南还建议，当您有超过3行标记时，不要使用内联模板。所以我的想法是使用lodash-templates和file-loader的组合，但我不确定lodash-template-loader是否接受file-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>

所以基本上我想用例如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可以读取的格式？

Answer 1

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

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

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

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

现场演示：https://angular-css-modules.herokuapp.com/
Github存储库：https://github.com/gquinteros93/angular-css-modules
逐步介绍的文章：https://indepth.dev/angular-css-modules/

使用没有内联模板的Angular 2的CSS模块

1 个答案: