Angular 5中如何让TS与Sass变量共用同一组值

我之前在维护Angular项目的时候也碰到过这种需要TS和SCSS共享常量的头疼问题，尤其是颜色这种需要严格保持一致的配置，重复写两遍不仅麻烦还容易出错。这里分享几个我亲测有效的解决方案，你可以根据自己的项目情况选：

方案1：SCSS导出变量到TS #

这是Angular生态里比较常用的方式，利用SCSS的:export语法把变量暴露给TS：

1. 在你的SCSS文件中定义变量并导出：

$colors: #7cb5ec #434348 #90ed7d;

// 导出变量供TS使用
:export {
  colors: $colors;
}

2. 在TS文件中导入SCSS并处理成数组：

import * as styles from './your-component.component.scss';

// 将导出的空格分隔字符串转为数组
const colours = (styles.colors as string).split(' ');

注意事项：

• Angular 5的CLI默认支持这种导出方式，但如果是自定义Webpack配置，要确保sass-loader版本支持:export语法；
• 导出的变量是字符串格式，所以需要用split(' ')转换为数组，顺序和SCSS里完全一致。

方案2：用JSON作为单一数据源 #

如果觉得SCSS导出的方式不够灵活，或者项目混用了其他预处理器，用JSON作为唯一数据源会更通用：

1. 创建一个colors.json文件存放颜色配置：

{
  "colors": ["#7cb5ec", "#434348", "#90ed7d"]
}

2. 在TS中直接导入使用：

import colorsData from './colors.json';
const colours = colorsData.colors;

3. 在SCSS中读取JSON文件并转为SCSS列表：

// 读取JSON文件并获取颜色数组
$colors-data: json('./colors.json');
$colors: $colors-data.colors;

// 如果需要转为SCSS空格分隔的列表，可以展开数组：
// $colors-list: $colors...;

注意事项：

• 确保SCSS能正确找到JSON文件的路径，可能需要调整相对路径；
• 旧版的node-sass可能需要额外配置才能使用json()函数，Angular 5默认的sass版本应该是支持的。

方案3：脚本自动同步（可选） #

如果上面两种方案都不适合，还可以写个简单的Node脚本自动同步TS和SCSS的常量。比如：

1. 在TS文件中定义好颜色数组；
2. 写一个脚本读取TS文件里的数组，生成对应的SCSS变量文件；
3. 在package.json的scripts里添加"prebuild": "node sync-colors.js"，让构建前自动执行脚本同步。

这个方案适合不想修改现有代码结构的场景，但需要额外维护脚本，相对麻烦一些。

总的来说，方案1和方案2是最推荐的，方案1贴合Angular+SCSS的生态，步骤简单；方案2更通用，适合多种技术栈的场景。我自己在项目里用的是方案1，省心又高效。

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