为什么需要配置 Dart Sass

因为 ruby Sass 和 node-sass 已经不维护了，其中 sass 中新出的语法(如 @use)，只能用 dart-sass 进行编译

安装

直接使用 npm 全局安装即可，最新版本的 sass 就是 dart sass 下的

npm install sass -g

webstorm 集成

首先如果之前安装过其他类型的 sass，可能需要卸载，比如之前使用 gem 安装的 sass

卸载命令如下

sudo gem uninstall sass

• 卸载完成后进入 webstorm -> setting -> tools -> file watcher
• 点击加号 +，选择 scss，webstorm 会自动识别，sass 安装的路径所以 program 不用配置了

一些配置的修改

编译遇到的问题

我之前的 Arguments 配置为

--no-cache --style expanded --sourcemap=none $FileName$:$FileNameWithoutExtension$.css

但是在 scss 转换为 css 使用上面的配置会报错，原因是 dart sass 的配置是和之前其它版本的 sass 的配置是不同的。

可以在命令行输入 sass --help，看看 sass 有哪些配置。

最终采用如下配置运行即可

--no-charset --no-source-map $FileName$ $FileNameWithoutExtension$.css

• --no-source-map： 表示不生成 map 文件
• --no-charset： 表示不生成 charset 标识