Angular 15.2新项目默认混淆全局CSS类问题求助

问题背景 #

我创建了一个带有Material组件和动画的Angular 15.2新项目，其package.json配置如下：

{
  "name": "name",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/cdk": "^15.2.6",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/material": "^15.2.6",
    "@angular/material-moment-adapter": "^15.2.7",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@microsoft/signalr": "^7.0.5",
    "bootstrap": "^5.2.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.6",
    "@angular/cli": "~15.2.6",
    "@angular/compiler-cli": "^15.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.9.4"
  }
}

随后在styles.scss中修改Material颜色并导入自定义样式文件：

@use "@angular/material" as mat;
// Plus imports for other components in your app.
@import "assets/css/tokens.css";

@include mat.core();

//Define material palettes and themes
    
@include mat.all-component-themes($my-theme-light);

[data-theme="dark"] {
  @include mat.all-component-colors($my-theme-dark);
}

@import "node_modules/bootstrap/scss/bootstrap";

@import "assets/css/colors.module.css"; // <---- 被混淆的自定义CSS
@import "assets/css/my.scss"; // <---- 未被混淆的自定义SCSS

问题现象 #

未修改任何Angular默认配置的情况下，colors.module.css中的CSS类全部被混淆（HTML中仍使用原类名），而my.scss中的类则保持明文未被混淆。

示例原colors.module.css代码：

.background {
  background-color: var(--md-sys-color-background) !important;
}
.background-text {
  color: var(--md-sys-color-background);
}

混淆后的类会变为类似_background_xxxx的随机命名形式。

疑问与解决 #

原因说明 #

这并非Angular新版本的配置变更，而是Angular CLI的默认行为：文件名中包含.module.后缀的CSS/SCSS文件会被自动识别为CSS模块，这类文件的类名会被作用域化（混淆），用于避免组件间的样式冲突。而不带.module.后缀的样式文件会被当作全局样式处理，类名保持原样。

恢复原有行为的方法 #

有两种可行方案：

• 方案一：修改文件名
  将colors.module.css重命名为colors.css，移除文件名中的.module.后缀，Angular会自动将其视为全局样式，类名不再被混淆。
• 方案二：调整angular.json配置
  在项目根目录的angular.json中，找到对应项目的build配置，在options的styles数组中直接引入该文件，同时移除styles.scss中的@import语句：

  "build": {
    "options": {
      // 其他原有配置...
      "styles": [
        "src/styles.scss",
        "src/assets/css/colors.module.css"
      ]
    }
  }
  

  这种方式下，Angular会把该文件当作全局样式处理，跳过CSS模块的类名混淆逻辑。

内容的提问来源于stack exchange，提问作者Majico