Angular11中styles.scss的:root块声明的CSS变量无效如何解决？

• Angular 全局样式未正确引入：angular.json 构建配置中没有把 styles.scss 加入全局样式数组，导致变量定义根本没有被打包到最终产物中
• CSS变量作用域问题：Angular 内置的视图封装机制，以及部分版本对:root选择器的处理存在兼容问题，会导致全局声明的变量无法被组件内样式读取
• 变量被覆盖：项目中其他全局样式文件存在同名的--primary变量定义，覆盖了你写的变量值
• SCSS编译异常：styles.scss 中存在其他语法错误，导致包含变量定义的这段代码没有被正常编译输出

1. 校验全局样式配置
   打开项目根目录下的angular.json，依次找到 projects > 你的项目名 > architect > build > options > styles 配置项，确保数组中包含"src/styles.scss"，修改后重启开发服务即可生效。

2. 调整变量声明的选择器
   将:root替换为兼容性更好的html、body选择器，避免作用域异常，修改styles.scss代码如下：

html, body {
    --primary : #0b68e8;
    --secondary: #ABCFFF;
}
.test-class {
    background: var(--primary);
}

3. 临时关闭组件视图封装测试
   如果上述操作无效，可以在出问题的业务组件中关闭视图封装，验证是否是封装机制导致的问题，修改组件代码如下：

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

@Component({
  selector: 'app-your-business-component',
  templateUrl: './your-business-component.component.html',
  styleUrls: ['./your-business-component.component.scss'],
  encapsulation: ViewEncapsulation.None // 新增该行关闭视图封装
})
export class YourBusinessComponent {}

注意：关闭视图封装后该组件的所有样式都会变为全局生效，需要注意类名命名规范，避免和其他全局样式冲突。

4. 排查变量覆盖与编译错误

• 打开浏览器开发者工具，选中应用了test-class的元素，查看样式面板中--primary变量的实际值，确认是否被其他样式覆盖
• 检查开发服务运行的控制台输出，确认是否存在SCSS编译报错，导致样式没有被正常打包

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