<>前言

在使用vue或者react开发项目时都会用到scss,或者less等的扩展语言,那么肯定会有公共变量提取与使用,这篇文章就是记录如何导出公共css变量的

:export 关键词
$menuText:#bfcbd9; $menuActiveText:#409EFF; $subMenuActiveText:#f4f4f5; // $
menuBg:#304156; $menuBg:#304156; $menuHover:#263445; $subMenuBg:#1f2d3d; $
subMenuHover:#001528; $backWhite:#ffffff; $sideBarWidth: 210px; :export {
menuText: $menuText; menuActiveText: $menuActiveText; subMenuActiveText:
$subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; subMenuBg:
$subMenuBg; subMenuHover: $subMenuHover; sideBarWidth: $sideBarWidth; backWhite:
$backWhite; }
在.scss文件中就可以直接使用变量,完了再单文件组件中需要引入使用

<>.scss文件
.main-container { min-height: 100%; transition: margin-left .28s; margin-left:
$sideBarWidth; position: relative; }
<>单文件页面 组件中
<style> import @/styles/index.scss .main{ width:sideBarWidth; } </style>
或者是在外部引入 import publicStyles from '@/styles/index.scss' mounted(){ console.log(
publicStyles) }
还可以在.js文件中使用
index.js
import style from 'indec.scss' console.log(style.menuText)

技术
今日推荐
阅读数 20
阅读数 13
阅读数 10
阅读数 9
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信