scss 中公共变量的导出方法:export

<>前言

在使用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)

• « 上一篇：华为Mate40惨遭山寨，搭载骁龙865只要898元
• » 下一篇：python赋值语句正确写法-python 赋值语句