标签：不同的 使用 splay code stylus div 代码 roo 一个
在stylus中使用：
1.在src目录下的assets文件中的styles文件中创建一个varibles.styl文件
2.在varibles.styl文件中书写代码
$bgColor = #00bcd4
3.在vue组件的style中引入全局样式
@import ‘../../../assets/styles/varibles.styl‘
4.使用全局样式
.header{ background : $bgColor }
原生css中使用：
1.在src目录下的assets文件中的styles文件中创建一个varibles.css文件
2.在varibles.css文件中书写代码
/*全局样式*/ :root{ --bgColor : #00bcd4; --textColor : #333; --headerHeight : .86rem; }
3.在vue组件的style中引入全局样式
/*引入css全局样式文件 对全局样式统一管理 提高代码的可维护性 与 js 不同的是css文件引入 @ 前面要加 ~, _s 在 vue.config.js中定义为指定目录 */ @import ‘~_s/varibles.css‘;
4.使用全局样式
.header{ display: flex; line-height: var(--headerHeight); background: var(--bgColor); color: #fff; }
标签：不同的 使用 splay code stylus div 代码 roo 一个
原文地址：https://www.cnblogs.com/rickyctbur/p/11802600.html
