Javascript 中使用 scss/sass variable 的方法

cola · 2021年02月11日17:23

以 vuejs 來說~
scss/sass 通常都會抽取共用變數，這個方式很常見也正規 e.g. _variable.scss

_variable.scss

$orange: #ff7b4a;
$blue-light: #8FADCB;
$blue-light-a1: rgba(143, 173, 203, 0.1);

.
.
.

但是在 javascript 的部份難免有需要用到這些變數
可以透過以下方式達成

新增 _exportStyle.scss

@import '~@/_variables';

:export {
  orange: $orange;
  blueLight: $blue-light;
  blueLightA1: $blue-light-a1;
}

在任一 javascript 或 vue

import styleVars from './Assets/_exportStyle.scss';


// 可以直接使用變數~
styleVars.orange 
styleVars.blueLight

ref.