umi 中默认的 CSS 预处理器是 less,less 比 sass 有太多优势,至少完全由 JS 实现就领先了很多。现在 sass 虽然有了 dart 的实现,但是依然存在跨平台问题,只是解决了以前 node-sass 的平台编译问题。

不过,在我们实际项目开发中,有太多 sass 编写的代码,这些代码因为各种各样的原因无法迁移到 less,也无法预编译,就不得不在 umi 中引入 sass 构建功能。

umi 一直以来文档就不完善,第三方支持就更差了,sass 配置遇到的问题只能自己想办法解决。

dart-sass 和 node-sass 的问题

首先安装 @umijs/plugin-sass 开启基本的 sass 支持。这个插件默认使用的 dart-sass,dart-sass 和 node-sass 之间的问题就不赘述了,直接使用新版的 dart-sass 大概率是不能兼容比较早版本的 sass 的语法和配置的。

这样的话我们就需要切换到 node-sass 的编译工具,首先安装 node-sass,注意 node-sass 和 sass-loader 的版本对应。通过设置 plugin-sass 切换编译使用的库

{
  sass: {
    implementation: require('node-sass'),
  }
}

全局变量的问题

除了要换编译用的库,sass 还不可避免的会遇到全局变量的问题,原来我们使用 sass 的 additionalData 或者 sass-resource-loader 来引入全局的 sass 代码,这两种我在 umi 的 plugin-sass 中测试都不能正常工作,看了一下插件的源码,发现它有一个 prependData 的参数,看起来似乎就是和 addtionalData 功能差不多。

{
  sass: {
    implementation: require('node-sass'),
    prependData: `
    @import '~/node_modules/my-package/src/styles/themes.scss';`,
  }
}

启动 umi 之后,sass 文件的处理都正常了。

这也暴露了 umi 的一个问题,作为国内使用的很多的前端框架,社区和生态支持有点差,很多问题无法得到有效的解决,可能新项目使用会更好一些。