WebStorm中配置scss编译环境

WebStorm中配置scss编译环境

前言(废话请跳过)

不用Ruby，去TM的node-sass，更不要autoprefixer和postcss-cli，只要装了node你就能像vs中一样高效的自动监听scss文件。

我只是想在WebStrom中写一写静态网页demo结果要装一堆环境，点名批评node-sass装几个小时还装不上，真是被恶心坏了。先是报python错误，又有文章叫安装windows-build-tools，结果这玩儿安装也报错，装了半天能装node-sass了，结果node的版本也不对，太恶心了。

搜了一下发现node-sass这玩意儿也是其他人的噩梦，我就放心了。

关于Dart Sass（不感兴趣也请跳过）

对于scss，主流的编译环境有三种：ruby sass、node-sass、dart-sass。

ruby sass

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。——sass中文网

sass 最早是 2006 年由 ruby 开发的，作为和它 web 框架的模版引擎 haml 配套的编写 css 的语言。因为比较好用，所以前端也都在用。——《继往开来的 sass 三代编译器：ruby sass、node-sass、dart-sass》

简而言之，sass就是ruby sass编译器的亲儿子，编译器就是用ruby语言写的，这使得安装的环境算不上复杂。

node-sass

用 c++ 实现了 sass 的编译器，所以你用node安装的时候可能会先让你安装windows-build-tools配置c++环境。

当然c++很快，这让node-sass的编译速度比ruby sass快，但是这也带来一个弊端，node-sass安装的时候要和 node 版本对应，不然就会编译报错。

如果你是在WebStorm中使用，还需要配置external tools，每次编译都要手动执行这个工具，如果你是在vscode中使用过Live Sass Compiler我想一定会觉得这很麻烦。

Dart Sass

为什么是Dart Sass，因为它更好用。

dart-sass 是用 dart 来写的 sass 编译器。dart 是 flutter 的编程语言，可以编译为 js，所以它提供的 npm 是 js 的，不需要像 node-sass 一样和 node 版本有绑定关系。——《继往开来的 sass 三代编译器：ruby sass、node-sass、dart-sass》

ruby sass 在2019年3月停止维护，而在2020年10月sass团队弃用node-sass的c++编译器

并且在WebStorm使用dart sass只需要在node安装dart sass即可，没那么多屁事。

安装

首先你需要有node.js环境，如果你没有node.js请参考此篇文章Node.js环境搭建，设置下载资源到D盘（多图）。

安装好node.js后，直接安装dart sass

npm install -g sass

查看dart sass的版本

npm list -g

至此安装完成

配置WebStorm

在file选项卡下setting选项中找到Tools选项下的File Watchers添加scss的监听

只要你安装好了drat sass此时就会自动识别编译器的位置

上图这个位置没有报红色或者警告，并且点开看能看到是关联node目录中的sass.cmd就说明没问题了

到此你的WebStorm已经能够自动编译scss文件了，但是此时你会发现编译的css文件是在scss文件下的

这里还需要修改arguments来设定编译后保存css文件的位置。

我们将arguments处改为如下：在当前scss文件目录的父目录下生成一个css目录，并将css文件保存在css目录中。

--update --source-map --style expanded $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

参数解读

--update 仅编译过期的样式表。
--source-map 生成源映射
--style 输出样式
expanded 展开输出的CSS样式
$FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css 将css文件生成在当前scss文件所在文件夹的父文件夹的css文件夹下

更多的参数可以参考下图

到此配置完成，当我们写完了scss之后直接ctrl+s就会自动编译，并在scss目录的父目录下生成同级的css目录

参考文献

[1] WebStorm官方文档 - Sass, SCSS, and Less

[2] 无道 - Webstorm编译scss文件[附CSS3前缀方法] - 腾讯云开发者社区

[3] 无道 - Webstorm编译scss（基于Ruby） - 腾讯云开发者社区

[3] 无道 - Webstorm编译scss（基于Ruby） - 腾讯云开发者社区

[4] 神说要有光 - 继往开来的 sass 三代编译器：ruby sass、node-sass、dart-sass - 知乎