如何在Vue+TypeScript项目中避免硬编码颜色值

下面提供几种实用的方式，让你在TypeScript代码和SCSS中共享颜色变量，消除重复硬编码：

方案1：将颜色变量统一存放在TS常量文件，SCSS同步引用 #

这种方式让TS作为单一数据源，SCSS同步使用这些值，适合需要在JS/TS中频繁引用颜色的场景。

1. 创建TS常量文件（比如src/constants/colors.ts）：

export const COLORS = {
  color1: '#67213a',
  color2: '#909aaa'
} as const;

2. 在SCSS文件中导入该TS文件，将值转为SCSS变量：

// color.scss
@import '../constants/colors.ts';

$color1: unquote(map-get($COLORS, color1));
$color2: unquote(map-get($COLORS, color2));

注：Vite默认支持这种导入，Webpack需配置sass-loader确保能解析TS文件。

3. 在Vue组件中直接使用TS常量：

import { COLORS } from '@/constants/colors';

// ...
chooseColor() {
  return COLORS[this.type as keyof typeof COLORS] || COLORS.color1;
}

方案2：使用CSS自定义属性，组件读取全局样式变量 #

这种方式以SCSS变量为基础，导出为全局CSS自定义属性，Vue组件通过DOM API读取，适合样式优先的场景。

1. 在SCSS中定义变量并导出为CSS自定义属性：

// color.scss
$color1: '#67213a';
$color2: '#909aaa';

:root {
  --color1: unquote($color1);
  --color2: unquote($color2);
}

记得在项目入口导入该SCSS文件，确保全局生效。

2. 在Vue组件中读取CSS变量：

chooseColor() {
  const rootStyle = getComputedStyle(document.documentElement);
  const targetColor = rootStyle.getPropertyValue(`--${this.type}`).trim();
  return targetColor || rootStyle.getPropertyValue('--color1').trim();
}

方案3：Vite专属：直接导入SCSS变量到TS #

如果你的项目基于Vite，可以利用其特性直接将SCSS变量导入到TS中，无需额外配置：

1. 修改SCSS文件，添加:export块导出变量：

// color.scss
$color1: '#67213a';
$color2: '#909aaa';

:export {
  color1: unquote($color1);
  color2: unquote($color2);
}

2. 在Vue组件中导入SCSS导出的变量：

import COLORS from '@/styles/color.scss';

// ...
chooseColor() {
  return COLORS[this.type as keyof typeof COLORS] || COLORS.color1;
}

内容的提问来源于stack exchange，提问作者World's famous people