Angular 自定义 webpack 配置启用 CSS 模块

Question

我正在尝试再次将CSS模块概念应用于我的角度应用程序，以将其嵌入到CSS的现有前端中，不幸的是，CSS重叠。我的项目使用 scss，如果我认为在最后一个构建步骤中由 scss 形成，我希望 webpack 在 CSS 之后"模块化"我的 CSS。

我想使用 webpack 的 CSS 加载器来实现这一点。
但我无法让它工作。

https://www.npmjs.com/package/@angular-builders/custom-webpack 要订购自定义我的 Webpack 配置。 我尝试应用下一个配置

module.exports = {
module: {
rules: [
{
test: /.css$/i,
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
};

并得到此错误

ERROR in Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(1:1) Unknown word
> 1 | exports = module.exports = require("../../../../css-loader/dist/runtime/api.js")(false);

我试图找到 css 加载器并将其添加到现有的

module.exports = (config, options) => {
const rules = config.module.rules || [];
rules.forEach(rule => {
if (String(rule.test) === String(/.css$/)) {
rule.use.push({ loader: 'css-loader', options: { modules: true }})
}
});
return config;
};

收到相同的错误。如何让它工作？

更新 1：

我发现angular使用postcss，它也提供这个功能作为一个插件，postcss模块。也仍然无法使其工作。

Answer 1

我能够在@angular-builders/custom-webpack的帮助下在Angular中实现CSS模块。

但是，我的解决方案使用postcss-modules和posthtml-css-modules而不是css-loader来散列样式。

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/

我希望它对你有用。