typescript中component.ts文件获取scss文件中定义的变量
第一步首先定义全局scss变量
// $appType:'PPW';
$appType:'LJ';
// 主色
$LJMainColor:#FFCA3A;
// 表单 label 、value颜色 黑色
$LJLabelColor:#252629;
// PlaceHolde颜色
$LJPlaceHolderColor:#959BA6;
// 分割线颜色
$LJSepLineColor: #E8EAED;
// 表单 末尾单位颜色
$LJEndTextColor:#959BA6;
// 灰色
$LJLabelGrayColor:#959BA6;
// 浅黑
$LJLabelLightBlackColor:#45474D;
// 常用字体颜色
$LJFontNormalColor:#27282e;
// Tab选项卡滑块样式
$LJTabBottomSliderColor:linear-gradient(90deg, #FFE14A 0%, #FFCA3A 100%);
$prefix: "--";
@function custom-property-name($name) {
@return $prefix + $name;
}
@mixin define-custom-property($name, $value) {
#{custom-property-name($name)}: $value;
}
body {
// Append SASS variables which are desired to be accesible:
@include define-custom-property('appTypeCustom', $appType);
}
2.第二步,因为 @include 是将变量引入到body,所以在需要获取变量的components文件中调用window.getComputedStyle(元素节点)来获取style的数组,这里面的元素节点就是document.body节点。
代码如下:
const bodyStyles = window.getComputedStyle(document.body);
this.appTypeCustom = bodyStyles.getPropertyValue('--appTypeCustom');
将变量配置在customGlobal.scss文件然后在ts文件访问的好处就是只需要改一个文件。方便维护。不用改了scss文件又改ts文件。