如何跨CSS层定义块使用SASS作用域变量以覆盖第三方库样式？

问题现象 #

我们在使用SASS的CSS层时遇到一个问题：当SASS变量定义在同一个@layer的不同代码块中时，SASS无法解析变量，报错Undefined variable color: $someColor；但如果变量和使用它的样式在同一个@layer代码块内，就能正常工作。

示例代码：

@layer main, overrides;

@layer main {
  $someColor: orange;
}

@layer overrides {
  $someColor: red;
}

@layer main {
  // $someColor: orange;

  h1 {
    color: $someColor; // 这里会报错：Undefined variable
  }
}

核心需求 #

我们需要通过重写SASS变量来覆盖PrimeNG这类自带primeng CSS层的第三方库样式，原本计划在引入PrimeNG的SCSS前，在@layer primeng { ... }中定义重写的变量，但遇到了上述变量跨代码块无法访问的问题。

可行解决方案 #

1. 全局定义重写变量（适配PrimeNG默认变量） #

PrimeNG的SASS变量大多用!default声明，这意味着我们可以在引入PrimeNG样式前，将重写的变量定义为全局变量，编译时全局变量会覆盖!default的默认值，不需要放在@layer块内。

示例代码：

// 先定义要重写的全局变量，覆盖PrimeNG的默认值
$primaryColor: #your-custom-color !default;
$fontFamily: 'Your Custom Font', sans-serif !default;

// 定义层顺序
@layer primeng, main;

// 引入PrimeNG的核心样式
@import 'primeng/styles';

// 自定义样式层
@layer main {
  .custom-component {
    color: $primaryColor;
  }
}

2. 统一在同一个@layer代码块内管理变量 #

SASS的@layer块是块级作用域，不同的@layer代码块之间无法共享变量。如果必须在层内定义变量，要确保变量和使用它的代码在同一个@layer块中，或者通过@use/@forward跨文件共享变量。

分文件示例：

• 新建_primeng-overrides.scss：

// 定义要重写的变量
$primaryColor: #your-custom-color;

• 在主样式文件中：

@layer primeng, main;

@layer primeng {
  // 引入重写变量，再引入PrimeNG的变量文件
  @use './primeng-overrides' as *;
  @import 'primeng/_variables';
}

@layer main {
  @use './primeng-overrides' as *;
  .custom-btn {
    background-color: $primaryColor;
  }
}

3. 改用CSS自定义属性（原生变量） #

如果不需要SASS变量的编译时特性，可以改用CSS自定义属性（--xxx），它遵循CSS层的优先级规则，且跨@layer代码块可访问，能更灵活地实现样式覆盖。

示例代码：

@layer primeng, overrides, main;

@layer primeng {
  :root {
    --primeng-primary-color: #default-color;
  }
}

@layer overrides {
  :root {
    --primeng-primary-color: #your-custom-color; // 优先级更高，会覆盖primeng层的定义
  }
}

@layer main {
  .p-button {
    background-color: var(--primeng-primary-color); // 最终使用自定义颜色
  }
}

这种方式完全符合CSS层的设计逻辑，也能直接作用于PrimeNG的组件样式（如果PrimeNG的样式已经使用了自定义属性，或者你可以通过自定义类覆盖）。

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