该方法不仅适用于webstorm,还适用于Jetbrains家下的能写css所有的产品。比如:Phpstorm, PyCharm等等。
Jetbrains
家产品真的是祸害了我,用的太顺手了。
VsCdoe
好用不,我要说不好用,9102年的今天肯定很多人打我。vscode好用,但是细节不够好。
这一点开源的产品和收费产品还是有一点差距的。【其实这一点要说,我真的习惯jetbrains的快捷键了,以及他的一些细节,我都以及很习惯了。要换到其他编辑器/IDE不习惯也正常。只能说习惯的力量真的是巨大的。】
上午在用vscode+插件的方法用scss写css,然后下午换成webstorm,感觉一下又不一样了。
有两种方法,一种使用网上说的安装
ruby
,一种是利用node.js 的node-sass
ruby官网:https://rubyinstaller.org/downloads/
ruby编译参见:https://www.cnblogs.com/congxueda/p/7086575.html
在此我们使用node的方法来编译。
npm install -g node-sass
运行以上命令,安装node-sass【一定 加g 全局安装】
填写内容
File type
监听变化的文件类型(不是此类型,不监听)
Insert Macro
插入宏,就是提供一些文件名、路径等变量
Scope
监听作用域(不在此作用域中的文件不监听)
Program
:
主程序,如果node-sass在全局可用,直接写node-sass。如果不是全局可用,请写全路径。
Arguments
参数,注意不要写-w --watch 因为file watchers已经进行监听,node-sass再进行监听会进入死循环。
Output paths to refresh
输出后刷新文件
此处我这里的参数配置是:将该scss/.scss文件编译的css文件放到__css文件夹
也就是说,在scss目录新建.scss文件,然后ws会自动编译到css/.css。如果想要不同配置需要修改Arguments
Program: node-sass
此处需要之前全局安装node-sass,也即你能在cmd里面输入node-sass不会提醒
不是内部或外部命令,也不是可运行的程序
Arguments: --style compressed $FileName$ $FileParentDir$\css\$FileNameWithoutExtension$.css
此处我这里的参数配置是:将该scss文件编译的css文件放到
css文件夹
Output paths to refresh: FileDir
以上$FileDir$默认即可吧~~
分别是安装autoprefixer和postcss-cli 注意也是全局安装。
npm install autoprefixer -g
npm install postcss-cli -g
位置:File->Tools->External Tools 点击add
填写内容:
Name: Autoprefixer
名称随意即可
description:Autoprefixer
描述随意即可
Program: F:\nodejs\node_global\postcss.cmd
之前安装的postcss-cli 文件的位置,我这里是设置到了F盘,默认应该是C盘。 设置请看:https://cloud.tencent.com/developer/article/1538154 这里不影响,去C盘找就行。直接搜索
postcss.cmd
也可。
Parameters: -u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$
参数,默认以上即可
Working directory:$ProjectFileDir$
工作目录,默认以上即可。
如下,点击需要加前缀的.css
文件,找到External Tools
工具。