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

【问题标题】：CSS Modules using Angular 2 without inline templates使用没有内联模板的 Angular 2 的 CSS 模块
【发布时间】：2016-07-16 15:59:21
【问题描述】：

我正在尝试让 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可以读取的格式？

【问题讨论】：

你应该做类似这样的事情：'template': require('./foo.html')，类似 css.. 请注意它的模板而不是 templateUrl
@entre 那是我不想要的。我不想要内联模板。

标签： javascript angular webpack css-modules

【解决方案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/

【讨论】：