Vue 引入全局样式scss

效果:

1、样式文件

css 复制代码
$base-color: "#458ef8";

:root {
  --base_color: #{$base-color};
}

2、main.ts文件引入

TypeScript 复制代码
import './styles/theme/base.scss' 

3、在对应文件使用

html 复制代码
<style lang="scss" scoped>
.test {
  width: 100px;
  height: 100px;
  background-color: var(--base_color);
}
</style>
相关推荐
西西小飞龙28 分钟前
Less/Sass Mixins vs. Extend
前端·less·sass
syjy231 分钟前
(含下载)BeTheme WordPress主题使用教程
前端·wordpress·wordpress建站
Misnice39 分钟前
shadcn如何使用
前端·reactjs
h_jQuery43 分钟前
vue使用gm-crypto对数据进行sm4加密处理
前端·javascript·vue.js
阿赛工作室1 小时前
Vue中onBeforeUnmount不触发的解决方案
前端·javascript·vue.js
码王吴彦祖1 小时前
顶象 AC 纯算法迁移实战:从补环境到纯算的完整拆解
java·前端·算法
小叶lr2 小时前
jenkins打包前端样式丢失/与本地不一致问题
运维·前端·jenkins
浩星2 小时前
electron系列1:Electron不是玩具,为什么桌面应用需要它?
前端·javascript·electron
ZC跨境爬虫2 小时前
Scrapy工作空间搭建与目录结构解析:从初始化到基础配置全流程
前端·爬虫·python·scrapy·自动化
小村儿2 小时前
连载04-最重要的Skill---一起吃透 Claude Code,告别 AI coding 迷茫
前端·后端·ai编程