事半功倍之Ionic APP通过scss全局文件换皮肤，typescript中component.ts文件获取scss文件中定义的全局变量

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文件。