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>
相关推荐
之歆13 小时前
DAY_12JavaScript DOM 完全指南(三):高级工程篇
开发语言·前端·javascript·ecmascript
来恩100313 小时前
EL表达式应用
前端·javascript·vue.js
希冀12313 小时前
【CSS学习第十篇】
前端·css
小飞侠是个胖子13 小时前
在 WebGL 中构建高性能 3D 沉浸式系统的三套高阶方案
前端·3d
wh_xia_jun13 小时前
Vue3 + Vitest 浏览器测试 从零开发指南
前端·javascript·vue.js
FlyWIHTSKY13 小时前
区块链前端技术栈介绍
前端·区块链
唐青枫13 小时前
别再让 key 写成字符串:TypeScript keyof 从入门到实战
前端·javascript·typescript
一点一木21 小时前
深度体验TRAE SOLO移动端7天:作为独立开发者,我把工作流揣进了兜里
前端·人工智能·trae
天外飞雨道沧桑21 小时前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
Lee川1 天前
mini-cursor 揭秘:从 Tool 定义到 Agent 循环的完整实现
前端·人工智能·后端