unipapp 解决无法编译sass_?FusionNext可配置能力从Sass体系升级为支持Css Variable

TL;DR

作为阿里内部存在了4年的前端基础组件库，Fusion Next老树开新花在1.21版本支持了css-variable能力，支持运行时换肤。本文旨在介绍Fusion Next为什么要支持这一能力，它是怎么做的，有哪些难点，如何把这一能力应用到业务项目中。
不得不提，本次FusionNext支持Css Variable的升级中，阿里云控制台团队 @csr632@流司 、阿里云混合云体验技术 @佐七 全程参与贡献，深度参与并支持到了核心能力的调研与建设，相当靠谱，点赞

一、为什么要支持？ ️

css-variable已经不是新技术了，各大浏览器厂商，甚至是IE Edge也早在2017年3月支持了这一功能。

Fusion服务了阿里集团的绝大部分BU，其实从2019年开始，已经陆续收到用户诉求，希望支持css变量，以达到用户在线主题切换的诉求。我们当时给的方案都是，编译多份css文件，在线加载、卸载样式来实现。既然已经有解决方案了，那是什么样的契机让我们决定在这个时间地这件事呢？

1.1 跨端技术栈统一

随着移动业务的发展，有越来越多的中后台业务要求既可以在PC上办公，也可以在H5上使用。前端委员会也成立跨端方向，支持一码跨多端。这里的跨端包括跨PC、H5、各种小程序可用。

实现上分别使用@alifd/next （基于react）@alifd/meet（基于rax）来分别满足PC和Mobile（其中@alifd/meet会通过rax2react技术转为@alifd/meet-react 这份基于react的实现，再与PC做融合）。一码多端，在开发的时候不可避免地会用到样式变量，因此样式方案需要统一。

小程序是基于rax的，受rax底层能力限制，样式都是直接写到style上的（不支持className），所以Fusion Mobile样式方案选择面很窄，只能使用css-variable方案，也就是说在Fusion Mobile端，所有变量都是css变量。所以统一*跨端项目的*技术栈为react+css variable。

1.2 sass编译慢，影响开发效率

Fusion样式体系绑定了sass方案，Sass编译样式属于编译时方案，通过webpack等插件将sass代码转为css，项目工程特别复杂时，编译很慢，影响开发效率。从来自《icejs 工程构建的优化探索》 的数据可以看出，FusionDesignPro-TS在开发环境，初次编译样式上的耗时为48.3s，构建生产环境资源，样式的编译耗时为41.1s。

如果Fusion采用css-variable方案，相当于所有文件都是最终文件，不需要进行sass编译，可以节省出sass-loader其中一部分的时间。

1.3 在线换肤

「在线换肤」已经逐渐成为中后台业务的强诉求，这里我们可以将在线换肤分为两类：

• 场景性的切换，比如亮色主题 <=> 暗色主题、业务1主题 <=> 业务2主题
• 轻量&个性化定制，比如更改主题色，圆角 <=> 直角

对于第一类，我们可以通过作用域来整套切换 css 变量，对于第二类，我们只需覆盖主题色相关变量或者圆角变量即可满足。

可见，相比于之前的每个主题都需要生成主题包样式文件来替换，通过 css 变量来切换主题更加灵活&优雅。

另外，收到来自阿里云控制台中台团队的需求。由于业务需要，设计师每年升级一版样式，xconsole虽然支撑了控制台业务，但大部分具体控制台并不直接由他们开发的，所以推动业务进行升级样式比较困难。

如果改成css-var方案，相当于把样式变量的注入从sass的编译时变到了css-variable的运行时，这样不需要业务的升级，只需要在容器环境下处理一次，就能实现样式更新的目的。

（此外，另外关于css-variable的兼容性问题可以在第四章节查看）

二、解决方案

2.1 前期调研

在新功能支持前必须做好调研，以减少具体执行过程中的资源浪费，本次功能迭代的要求是：必须在*支持新css变量功能的同时，尽量减少结构的变动、减少代码的修改*。按照执行顺序也就是：

• 从最小改动出发，确定整体改造思路；
• 从用户使用出发，确定组件库包结构；
• 从技术角度出发，调研sass变量转为css变量的技术点。

2.1.1 整体改造思路

FusionNext的开发用到了scss变量，包括「基础变量」「组件变量」两类（其中基础变量是推荐用户使用到业务组件、页面当中的，组件变量不推荐用户使用）。

这些变量加起来有几百条，一一修改不现实，所以我们决定：基础组件库的开发仍然采用scss变量方案，只是在打包阶段，通过脚本产生一份sass变量到css变量的映射，用这份映射与代码进行编译，产出带css变量的新文件们。也就是说css变量与sass变量的变量名差异在于把 $ 替换成了 -- 。

// 基础变量
$color-brand1-6: #5584FF !default;
$size-base: 4px !default;
$corner-1: 3px !default;
$line-zero: 0px !default;

// 组件变量
$btn-size-s-height: $s-5 !default;
$btn-size-s-padding: $s-2 !default;
$btn-size-s-corner: $corner-1 !def