vue3中集成sass实现全局scss样式变量

一、安装sass

npm i sass 
 

二，在style/variable.scss创建一个variable.scss文件

// 给项目提供的scss全局变量
$mycolor:red;
 

三、在vite.config.ts文件配置如下:

export default defineConfig({
  plugins: [
    vue(),
  // scss全局变量的一个配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },
})

四、可以使用了，在style标签中通过$定义的全局变量名字就可以获取对应的值了

<style scoped lang="scss">

div{

  h1{

    color: $color;

    size: 60px;

    font-size: $fontSize;

  }

}

</style>