sass 定义全局变量

定义变量文件

随便写一个scss文件，比如在 src/assets/var.scss

$my-color: #00b96b;

打包工具配置

不同工具 如webpack、vite有不同的处理方式加载到全局

vite

// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/var.scss" as *;`,
      },
    },
  },
});

使用

在项目中的任意一个 scss均可使用var.scss中定义的变量

// index.scss
span{
    color: $my-color;
}