1. 在<style>中使用scss定義的變量和css變量
1. 在@/style/variables.scss文件中定義scss變量
// scss變量
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$menuBg: #304156;
// css變量
:root {--el-menu-active-color: $menuActiveText; // 活動菜單項的文本顏色--el-menu-background-color: $menuBg; // 菜單的背景顏色--el-menu-text-color: $menuText; // 菜單的文字顏色
}
2. 在vite.config.ts中引入
- 以前使用的@import已經被廢棄了
/*引入index.scss文件中的變量*/css: {preprocessorOptions: {scss: {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: var(--el-menu-bg-color);--el-menu-active-color: var(--el-menu-active-color);--el-menu-text-color: var(--el-menu-text-color);
}
</style>
2. 在標簽和<script>中使用scss定義的變量
1. 在@/style/variables.module.scss文件中導出常量
$red: red;
:export {fontColor: $red;
}
2. 在vue組件中引入
- 可以在組件中傳遞了
<script setup lang="ts">
import fc from '@/style/variables.module.scss'
console.log(fc)
</script>
控制臺打印結果：
3. 在標簽中使用
<div :style="{ color: fc.fontColor }">scss變量</div>
