vue3 使用sass变量

pnpm add -D sass

1. 在<style>中使用scss定义的变量和css变量

1. 在@/style/variables.scss文件中定义scss变量

 // scss变量
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$menuBg: #304156;

2. 在vite.config.ts中引入

• 以前使用的@import已经被废弃了

  /*引入index.scss文件中的变量*/
  css: {
    preprocessorOptions: {
      scss: {
      	javascriptEnabled: true,
        additionalData: `@use "@/style/variables.scss" as *;`,
      },
    },
  },

3.使用

• 可以在style中使用

<style scoped lang="scss">
 .sidebar {
    width: 200px;
    height: 100vh;
    background-color: $menuBg;	
  }
.el-menu-vertical-demo {
  --el-menu-bg-color: $menuBg;
  --el-menu-active-color: $menuActiveText;
  --el-menu-text-color: $menuText;
}
</style>

2. 在标签和<script>中使用scss定义的变量

1. 在@/style/variables.module.scss文件中导出常量

$red: red;
:export {
  fontColor: $red;
  background-color: $menuBg;	// 可直接导出variables.scss
}

2. 在vue组件中引入

• 可以在组件中传递了

<script setup lang="ts">
import fontColor from '@/style/variables.module.scss'
console.log(fontColor)
</script>

控制台打印结果：

3. 在标签中使用

<div :style="{ color: fc.fontColor }">scss变量</div>

3. 不要在vite.config和main.ts中引入同一个文件