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

【问题标题】：Angular custom webpack config enable CSS modulesAngular 自定义 webpack 配置启用 CSS 模块
【发布时间】：2020-02-10 15:31:45
【问题描述】：

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

我想使用 webpack 的 CSS loader 来实现。
但我无法让它工作。

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-modules。也仍然无法使其工作。

【问题讨论】：

标签： css angular webpack webpack-style-loader css-loader

【解决方案1】：

按照您的建议，在 @angular-builders/custom-webpack 的帮助下，我能够在 Angular 中实现 CSS Modules。

但是，我的解决方案使用 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/

希望对你有用。

【讨论】：