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

港控/mmm° 2022-09-12 01:58 5阅读 0赞

原文出处：[ https://blog.csdn.net/u012381782/article/details/109715521 （建议阅读原文）][https_blog.csdn.net_u012381782_article_details_109715521]  
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文件。  
————————————————  
版权声明：本文为CSDN博主「AndrewWen099」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/u012381782/article/details/109715521

[https_blog.csdn.net_u012381782_article_details_109715521]: https://blog.csdn.net/u012381782/article/details/109715521