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>
相关推荐
艾伦野鸽ggg11 小时前
CSS容器查询和悬浮间隙问题
前端·css
云水一下11 小时前
Vue.js从零到精通系列(一):初识Vue——背景、环境与第一个应用
前端·javascript·vue.js
大大杰哥11 小时前
Vue2学习(1)--了解基本方法与概念
javascript·学习·vue
云水一下12 小时前
Vue.js从零到精通系列(二):响应式核心——ref、reactive、computed与watch
前端·javascript·vue.js
放下华子我只抽RuiKe512 小时前
FastAPI 全栈后端(二):路由与数据模型
前端·人工智能·react.js·前端框架·html·fastapi
lichenyang45312 小时前
ArkTS 严格类型系统:我答错 2 道题后才真正搞懂的几条规则
前端
小小小小宇12 小时前
定高、不定高、瀑布流虚拟列表
前端
天启HTTP12 小时前
开启全局代理后网络变慢,问题出在哪
开发语言·前端·网络·tcp/ip·php
卡布鲁12 小时前
Webpack 核心原理与自定义 Loader/Plugin 实战
前端·javascript
智码看视界12 小时前
Web Storage 的无障碍实践与工程化应用
前端·javascript·web