安装

npm i sass@1.26.5

1、新建style/settings的var.scss

$color-primary: #FF5777;
$color-white: #FFFFFF;
$color-black: #000000;

$color-text-primary: #333333;
$color-text-secondary: #666666;
$color-text-tertiary: $color-white;
$color-text-quaternary: $color-primary;

2、新建style/acss的font-color.scss

@each $style in (primary $color-text-primary, secondary $color-text-secondary, tertiary $color-text-tertiary, quaternary $color-text-quaternary) {
  [font-#{nth($style, 1)}] {
    color: #{nth($style, 2)};
  }
}

3、新建style的index.scss

@import "./settings/var.scss";
@import "./acss/font-color.scss";

4、新建style的gobal.scss

@import "./settings/var.scss";

5、vite.config.ts配置

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/style/gobal.scss";`
      }
    }
  }

使用

    <div>
      <p >aaa</p>
      <p font-quaternary>aaa</p>
    </div>

  p{
    color:$color-black;
    border:1px red solid;
  }