Angular中如何全局访问styles.scss导入的SCSS变量？

原因分析 #

你遇到的问题主要有两个核心原因：

1. SCSS变量在CSS自定义属性中未使用插值语法：SCSS是预编译语言，CSS自定义属性的值会被当作普通字符串处理，直接写入$gray-300不会触发SCSS的变量解析逻辑，必须用SCSS插值语法#{$变量名}才能将变量值替换为实际的颜色值。
2. 共享库变量作用域（可能性较低）：如果共享库中的$gray-300是定义在局部作用域内（比如嵌套选择器、@mixin/@function内部、@media规则里），而非全局作用域，那么在styles.scss的:root全局选择器中无法访问该变量。但你之前在组件中导入库能正常使用变量，说明这个概率很低，大概率是插值语法的问题。

无需修改共享库的解决办法 #

办法1：用插值语法转CSS自定义属性

修改styles.scss代码，通过插值语法让SCSS预编译时替换变量值：

@import "~node_modules/@my-company/shared-ui/styles/styles";

:root{
  --myapp-background-color: #{$gray-300};
}

之后就能在组件样式表中直接使用CSS自定义属性，无需重复导入共享库：

.my-component {
  background-color: var(--myapp-background-color);
}

办法2：构建工具全局导入变量文件

如果共享库的styles.scss包含变量和实际样式代码，找到库中单独存放变量的文件（比如_variables.scss），通过构建工具配置全局自动导入该变量文件，既让组件能直接用变量，又不会重复打包样式：

• Webpack配置（修改sass-loader）：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                additionalData: '@import "@my-company/shared-ui/styles/_variables";',
              },
            },
          ],
        },
      ],
    },
  };
  

• Vite配置（修改vite.config.js）：

  export default {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@my-company/shared-ui/styles/_variables";',
        },
      },
    },
  };
  

办法3：用@use替代@import（SCSS 1.23.0+）

如果你的SCSS版本支持@use，可以用它替代@import，@use会自动处理重复导入，同一文件只会被编译一次：

// styles.scss中导入一次
@use "~node_modules/@my-company/shared-ui/styles/styles" as shared;

// 组件样式表中直接使用
.my-component {
  background-color: shared.$gray-300;
}

@use还会将库变量封装在命名空间下，避免全局变量冲突。

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