Webstorm编译scss文件[附CSS3前缀方法]

无道 2019-07-19 0 条评论 教程相关 阅读832 手机阅读

前言

该方法不仅适用于webstorm,还适用于Jetbrains家下的能写css所有的产品。比如:Phpstorm, PyCharm等等。

Jetbrains家产品真的是祸害了我,用的太顺手了。

VsCdoe好用不,我要说不好用,9102年的今天肯定很多人打我。vscode好用,但是细节不够好。

这一点开源的产品和收费产品还是有一点差距的。【其实这一点要说,我真的习惯jetbrains的快捷键了,以及他的一些细节,我都以及很习惯了。要换到其他编辑器/IDE不习惯也正常。只能说习惯的力量真的是巨大的。

上午在用vscode+插件的方法用scss写css,然后下午换成webstorm,感觉一下又不一样了。

安装scss编译器

有两种方法,一种使用网上说的安装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 全局安装】

打开webstorm设置界面

WebStorm设置界面

+scss文件的File Watchers

截图-1563453786

填写内容

webstorm FileWatchers设置界面

配置解释

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

截图-1563431638

npm install postcss-cli -g

截图-1563431670

配置autoprefixer

位置:File->Tools->External Tools 点击add

Exteral Tools

截图-1563431833

填写内容:

Name: Autoprefixer

名称随意即可

description:Autoprefixer

描述随意即可

Program: F:\nodejs\node_global\postcss.cmd

之前安装的postcss-cli 文件的位置,我这里是设置到了F盘,默认应该是C盘。

设置请看:https://www.misiyu.cn/article/15.html

这里不影响,去C盘找就行。直接搜索postcss.cmd也可。

Parameters: -u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$

参数,默认以上即可

Working directory:$ProjectFileDir$

工作目录,默认以上即可。

使用

如下,点击需要加前缀的.css文件,找到External Tools工具。

截图-1563432028

效果

Css 自动加CSS3前缀

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 2019-07-26 08:26
这篇文章还没有评论呢~
点击刷新/生成验证码