Angular中app.component.css定义的CSS变量无法在其他组件使用如何解决？

Angular 默认开启了视图封装（ViewEncapsulation.Emulated）机制，会为每个组件的样式自动添加唯一属性前缀实现样式隔离。你写在 app.component.css 中的:root规则会被限制在AppComponent内部作用域，其他组件无法访问到对应变量。

方案1：写入全局样式文件（最推荐） #

这是最通用无副作用的实现方式：

1. 找到项目根目录下的全局样式文件，默认路径为 src/styles.css（如果是scss项目对应styles.scss）
2. 将你的CSS变量定义直接写在该文件中即可，该文件的样式默认全局生效，所有组件都可以直接使用变量

:root {
  --main-bg1: rgb(26, 28, 29);
  --main-bg2: rgb(66, 77, 79);
  --main-bg3: rgb(93, 109, 112);
}

3. 确认angular.json配置中已经引入了该全局样式文件，默认生成的项目都会自动配置：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "styles": ["src/styles.css"]
          }
        }
      }
    }
  }
}

方案2：关闭根组件的视图封装 #

如果你需要把变量定义放在app.component.css中，可以关闭AppComponent的视图封装，让它的所有样式全局生效：
修改app.component.ts的配置：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  // 关闭视图封装，当前组件样式会全局生效
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  // 组件原有逻辑
}

注意：该方案会让AppComponent中写的所有样式都变成全局样式，注意避免类名冲突。

配置完成后重启开发服务即可在所有组件中正常使用全局CSS变量。

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