vite下引用scss 全局变量

在项目中，我们有需要频繁的用到一些颜色、高度等样式，为了防止每一个页面写一遍样式，防止日后主题颜色更改 需要修改很多页面，我们抽取了 variable.scss用来存放公共的样式；

1. 首先确保安装scss

npm install sass -D

官网解决办法

2. 在vite.config.ts

css: {
    preprocessorOptions: {
      scss: {
        // 全局引入变量// 给导入的路径最后加上 ;
        additionalData: `@import '@/assets/css/variable.scss';`
      }
    }
  },

3. 使用

<style lang="scss" scoped>
.main{
 color: $text-color-secondary;
}
</style>