如何在Angular内联组件样式中使用外部SCSS变量

我之前也碰到过完全一样的问题！在Angular里用SCSS变量确实有几个容易踩的小坑，给你整理几个靠谱的解决办法：

1. 组件内手动导入变量文件（适合局部使用的变量） #

首先要注意路径的正确性，这是最容易出错的地方。假设你的_variables.scss放在src/styles/目录下，而组件在src/app/my-component/里，那你需要用相对路径导入，而且SCSS导入时可以省略文件名的下划线和.scss后缀：

示例（外部样式文件） #

如果组件用的是外部.scss文件（通过styleUrls引入）：

// src/app/my-component/my-component.component.scss
@import '../../styles/variables';

.my-component {
  background-color: $primary-color;
  color: $text-color;
}

示例（内联样式） #

如果是用内联styles数组：

// src/app/my-component/my-component.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styles: [`
    @import '../../styles/variables';
    .my-component {
      background-color: $primary-color;
      color: $text-color;
    }
  `]
})
export class MyComponentComponent { }

注意：Angular 12+ 已经不再推荐使用~前缀来引用全局文件了，直接用相对路径或者以src/开头的绝对路径更稳妥。

2. 全局导入变量文件（省心的通用方案） #

如果你的变量是全局通用的，没必要每个组件都手动导入，直接在angular.json里配置全局注入：

找到architect.build.options.styles数组，把你的变量文件路径加进去：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles/_variables.scss",
              "src/styles/styles.scss"
            ],
            // 其他配置...
          }
        }
      }
    }
  }
}

配置完成后，所有组件的SCSS样式（不管是外部文件还是内联）都能直接使用变量，不需要再手动导入。

3. 排查常见错误点 #

如果还是不行，检查这几个地方：

• 确认变量文件的语法正确：比如变量定义是$primary-color: #2196F3;，有没有遗漏分号或者拼写错误；
• 确保你的Angular项目已经配置了SCSS支持：创建项目时选了SCSS模板，或者通过ng config schematics.@schematics/angular:component.style scss命令修改了默认样式格式；
• 如果之前用了@import 'variables'这种无路径的写法，SCSS会在当前目录找文件，肯定找不到全局的变量文件，必须写对路径。

内容的提问来源于stack exchange，提问作者Christian Vincenzo Traina