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>
相关推荐
隔壁小邓1 分钟前
vue的组件化的理解之单独拆分的组件&组件的封装
前端·javascript·vue.js
困惑阿三3 分钟前
全栈部署排雷手册:从 405 报错到飞书推送成功
服务器·前端·后端·nginx·阿里云·node.js·飞书
无名-CODING4 分钟前
从零开始!Vue3+SpringBoot前后端分离项目Docker部署实战(下):Vue前端Nginx反代与致命坑点盘点
前端·spring boot·docker
我命由我123454 分钟前
Element Plus 问题:选择框表单校验没有触发
开发语言·前端·javascript·html·ecmascript·html5·js
optimistic_chen14 分钟前
【Vue3入门】vue-router 路由管理
前端·javascript·vue.js·路由·router
柯儿的天空29 分钟前
WebGPU全面解析:新一代Web图形与计算API
前端·chrome·microsoft·前端框架·chrome devtools·view design
捕捉一只前端小白31 分钟前
cpolar内网穿透以及微信小程序域名设置
前端·vue.js·微信小程序·小程序
wuhen_n35 分钟前
ESLint + Prettier + Husky + lint-staged:建立自动化的高效前端工作流
前端·javascript·vue.js
小同志0035 分钟前
HTML 基础
前端·javascript·html