<> preface
in use vue perhaps react It's used in development projects scss, perhaps less The extended language of , Then there must be public variable extraction and use , This article is to record how to export public data css Variable
:export key word
$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; }
stay .scss The variable can be used directly in the file , After that, it needs to be introduced into the single file component
<>.scss file
.main-container { min-height: 100%; transition: margin-left .28s; margin-left:
$sideBarWidth; position: relative; }
<> Single file page In component
<style> import @/styles/index.scss .main{ width:sideBarWidth; } </style>
Or is it introduced externally import publicStyles from '@/styles/index.scss' mounted(){ console.log(
publicStyles) }
It can also be in the .js File
index.js
import style from 'indec.scss' console.log(style.menuText)
Technology