如何在Angular5组件HTML中访问SCSS/SASS变量

我来帮你解决在Angular 5组件HTML中访问SCSS变量的问题，这确实是统一项目调色板时的常见需求。下面给你几个实用的方案，你可以根据自己的场景选择：

这个方法通过将SCSS变量映射为CSS全局自定义属性，让HTML模板可以直接通过var()语法引用，既保持了SCSS变量的统一管理，又能在HTML里灵活使用。

1. 更新你的variables.scss
   把SCSS变量转成:root下的CSS自定义属性，这样全局都能访问：

// variables.scss
$primary-1: #cccccc;
$primary-2: #666666;
$primary-3: #000000;

// 映射为CSS自定义属性
:root {
  --primary-1: #{$primary-1};
  --primary-2: #{$primary-2};
  --primary-3: #{$primary-3};
}

2. 确保variables.scss全局生效
   在Angular 5的angular-cli.json配置文件中，把variables.scss加入全局样式，或者在styles.scss里通过@import './variables.scss'导入（二选一即可）：

// angular-cli.json
"styles": [
  "src/styles.scss",
  "src/variables.scss"
],
// 可选：配置stylePreprocessorOptions让组件无需重复导入variables.scss
"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
}

3. 在组件HTML中直接引用
   比如你的LineChartComponent模板里，就可以用var(--变量名)来设置Chart.js的样式：

<canvas baseChart
        [datasets]="lineChartData"
        [labels]="lineChartLabels"
        [options]="{
          scales: {
            yAxes: [{
              gridLines: {
                color: 'var(--primary-2)'
              }
            }]
          }
        }">
</canvas>

如果需要在TypeScript逻辑中也用到这些颜色值，可以把SCSS变量的值同步到组件属性，再在HTML中绑定。

1. 在组件SCSS中定义局部CSS变量

// line-chart.component.scss
@import 'variables';

:host {
  // 将SCSS变量赋值给组件作用域内的CSS变量
  --chart-primary-1: #{$primary-1};
}

2. 在组件TS中获取变量值
   通过ElementRef获取CSS变量的值，赋值给组件属性：

// line-chart.component.ts
import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.scss']
})
export class LineChartComponent implements OnInit {
  primary1Color: string;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    // 获取组件作用域内的CSS变量值
    this.primary1Color = getComputedStyle(this.el.nativeElement)
      .getPropertyValue('--chart-primary-1')
      .trim();
  }
}

3. 在HTML中绑定组件属性

<canvas baseChart
        [datasets]="[{
          data: [65, 59, 80, 81, 56, 55, 40],
          borderColor: primary1Color,
          fill: false
        }]"
        [labels]="lineChartLabels">
</canvas>

如果希望TypeScript和SCSS共享同一套颜色配置，可以创建一个主题服务，把颜色变量放在服务中，同时在SCSS里导入服务的配置（需要额外工具支持，或者手动保持同步）。

1. 创建主题服务

// theme.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class ThemeService {
  // 这里的颜色和variables.scss保持一致
  public colors = {
    primary1: '#cccccc',
    primary2: '#666666',
    primary3: '#000000'
  };
}

2. 在组件中注入服务
   确保服务在AppModule中被提供，然后在组件里注入：

// line-chart.component.ts
import { Component } from '@angular/core';
import { ThemeService } from '../theme.service';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.scss']
})
export class LineChartComponent {
  constructor(public theme: ThemeService) { }
}

3. 在HTML中直接使用服务属性

<canvas baseChart
        [datasets]="[{
          data: [65, 59, 80, 81, 56, 55, 40],
          borderColor: theme.colors.primary1,
          fill: false
        }]"
        [labels]="lineChartLabels">
</canvas>

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