不用Ruby,去TM的node-sass,更不要autoprefixer和postcss-cli,只要装了node你就能像vs中一样高效的自动监听scss文件。
我只是想在WebStrom中写一写静态网页demo结果要装一堆环境,点名批评node-sass装几个小时还装不上,真是被恶心坏了。先是报python错误,又有文章叫安装windows-build-tools,结果这玩儿安装也报错,装了半天能装node-sass了,结果node的版本也不对,太恶心了。
搜了一下发现node-sass这玩意儿也是其他人的噩梦,我就放心了。
对于scss,主流的编译环境有三种:ruby sass、node-sass、dart-sass。
sass
基于Ruby
语言开发而成,因此安装sass
前需要安装Ruby。——sass中文网sass 最早是 2006 年由 ruby 开发的,作为和它 web 框架的模版引擎 haml 配套的编写 css 的语言。因为比较好用,所以前端也都在用。——《继往开来的 sass 三代编译器:ruby sass、node-sass、dart-sass》
简而言之,sass
就是ruby sass
编译器的亲儿子,编译器就是用ruby
语言写的,这使得安装的环境算不上复杂。
用 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 是 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
至此安装完成
在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 - 知乎