专栏首页无道编程Webstorm编译scss文件[附CSS3前缀方法]

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

前言

该方法不仅适用于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设置界面

+scss文件的File Watchers

填写内容

配置解释

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

配置autoprefixer

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

填写内容:

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工具。

效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用redis-trib.rb搭建集群

    在上一篇中我们使用Gossip协议手动搭建了一个集群环境,在这一篇中我们使用redis-trib.rb工具搭建一个新集群,redis-trib.rb工具相比手动...

    吉林乌拉
  • 5 门正在奋力崛起的编程语言

    在软件项目与具体实现层面,我们需要考虑众多具体因素。但无论从哪种角度出发,技术栈的选择永远是决定项目成功与否的核心因素之一。根据您的实际应用需求、站点或者产品设...

    GitHubDaily
  • CVE-2019-5418:Ruby on Rails路径穿越与任意文件读取复现

    Ruby on Rails是一个 Web 应用程序框架,是一个相对较新的 Web 应用程序框架,构建在 Ruby 语言之上。它被宣传为现有企业框架的一个替代,而...

    用户1631416
  • CocoaPods的安装使用

    CocoaPods 是一个负责管理 iOS 项目中第三方开源库的工具。CocoaPods 的项目源码在 GitHub上管理。 因为现在很多第三方框架都分为 C...

    honey缘木鱼
  • 利用Github+Jeklly搭建个人博客网站

    在上篇文章《个人博客如何选型?》中讲到,可以利用 Github Pages 来搭建个人博客网站,本文主要讲解其中的各种细节。

    猴哥yuri
  • CentOS7下安装GitLab

    GitLab 是一个用于代码仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务

    yuanfan2012
  • 5 门可能衰落的编程语言

    并不是所有编程语言都能经久不衰。事实上,新一代的开发人员会采用他们认为更容易使用的其他语言或框架,即使是最流行的语言也不可避免地会走向衰落。

    GitHubDaily
  • 五种拥有光明发展前景的新兴编程语言

    在软件项目与具体实现层面,我们需要考虑众多具体因素。但无论从哪种角度出发,技术栈的选择永远是决定项目成功与否的核心因素之一。根据您的实际应用需求、站点或者产品设...

    奋斗蒙
  • 利用Github+Jeklly搭建个人博客网站

    在上篇文章《个人博客如何选型?》中讲到,可以利用 Github Pages 来搭建个人博客网站,本文主要讲解其中的各种细节。

    叫我龙总

扫码关注云+社区

领取腾讯云代金券