vue3 使用sass变量

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

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

css 复制代码
 // 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已经被废弃了
javascript 复制代码
  /*引入index.scss文件中的变量*/
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/style/variables.scss" as *;`,
      },
    },
  },

3.使用

  • 暂时发现只能在style中使用,更多使用方法等待慢慢发现
css 复制代码
<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文件中导出常量

javascript 复制代码
$red: red;
:export {
  fontColor: $red;
}

2. 在vue组件中引入

  • 可以在组件中传递了
javascript 复制代码
<script setup lang="ts">
import fc from '@/style/variables.module.scss'
console.log(fc)
</script>

控制台打印结果:

3. 在标签中使用

html 复制代码
<div :style="{ color: fc.fontColor }">scss变量</div>
相关推荐
用户6883362059702 分钟前
Progressive Web App (PWA)
前端
沢田纲吉3 分钟前
《LLVM IR 学习手记(二):变量表达式编译器的实现与深入解析》
前端·编程语言·llvm
小徐_23334 分钟前
VitePress 博客变身 APP,支持离线访问,只需这一招。
前端·vitepress·pwa
猪哥帅过吴彦祖4 分钟前
第 5 篇:WebGL 从 2D 到 3D - 坐标系、透视与相机
前端·javascript·webgl
折七5 分钟前
expo sdk53+ 集成极光推送消息推送 ios swift
前端·javascript·ios
猪哥帅过吴彦祖6 分钟前
Flutter 系列教程:布局基础 (上) - `Container`, `Row`, `Column`, `Flex`
前端·flutter·ios
lifejump6 分钟前
DVWA | XSS 跨站脚本注入
前端·xss
gplitems1237 分钟前
Tripfery - Travel & Tour Booking WordPress Theme Tested
前端
流星稍逝7 分钟前
前端&后端解决跨域的方法
前端·后端
白水清风10 分钟前
【基础】关于函数式编程的知识
前端·javascript·面试