Question

我试图再次使用我的有角度的应用程序的CSS模块概念，以将其嵌入到现有的CSS前端中，不幸的是它们重叠了。我的项目使用的是scss，如果我想在上一个构建步骤中由scss组成CSS，我希望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-modules这个功能。也仍然无法使其正常工作。

Answer 1

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

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

我希望它对您有用。

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

1 个答案: