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>
相关推荐
光影少年2 小时前
flex布局和grid布局区别,实现两边固定布局中间自适应
前端·css3·web·ai编程
全栈测试笔记2 小时前
异步函数与异步生成器
linux·服务器·前端·数据库·python
EndingCoder2 小时前
配置 tsconfig.json:高级选项
linux·前端·ubuntu·typescript·json
木风小助理3 小时前
JavaStreamAPI的性能审视,优雅语法背后的隐形成本与优化实践
java·前端·数据库
white-persist4 小时前
轻松抓包微信小程序:Proxifier+Burp Suite教程
前端·网络·安全·网络安全·微信小程序·小程序·notepad++
敲敲了个代码5 小时前
多标签页强提醒不重复打扰:从“弹框轰炸”到“共享待处理队列”的实战
java·前端·javascript·面试·架构
不想上班只想要钱5 小时前
动态类名在 <swiper-slide 的复制项中没有起作用的解决方法
前端·vue.js
weixin_395448915 小时前
tidl_import_mul_rmfsd_psd_u8_3x480x544_bise_raw_dynamic.txt
java·服务器·前端
Jinuss6 小时前
源码分析之React中updateContainerImpl方法更新容器
前端·react.js·前端框架