umi中使用 sass 的相关问题

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 的一个问题，作为国内使用的很多的前端框架，社区和生态支持有点差，很多问题无法得到有效的解决，可能新项目使用会更好一些。