Webstorm配置CSS/SCSS自动补全兼容前缀autoprefixer插件

简介: 关于Autoprefixer Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。

关于Autoprefixer

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:

使用方法:

step1:安装node.js 
step2:安装Autoprefixer 

npm install autoprefixer -g


step3:安装postcss-cli  

npm install postcss-cli -g

step4:设置webstorm External Tools

打开webstorm->File->设置->搜索External Tools->点击‘+’,设置Edit Tool

 

Name:autoprefixer 

Tool settings

       Program: 找到AppData下的文件postcss.cm  若找不到AppData,在地址栏输入%appdata%回车即可

       Parameters:-u autoprefixer -o outputFile inputFile  注意文件顺序输出文件及输入文件 ,输入文件需要先新建,不能自动生成

       Working directory:文件目录即可,可根据自己需要调整

写具体配置,例如我的配置,如图:

  1. Program:填入你的postcss-cli 的PATH;
  2. Parameters: -u autoprefixer -o $FileDir$\$FileName$  $FileDir$\$FileName$ ,你可以根据你自己的需要配置,具体参见https://github.com/code42day/postcss-cli
  3. Working directory :$ProjectFileDir$

使用(可以对scss和css文件都可使用)

在输出文件中点击右键->autoprefixer,

设置快捷键

点ok

完成

配置兼容程度:

在安装包目录下的node_modules\browserslist这个包里

配置文件是index.js

我的目录是: C:\Users\Administrator\AppData\Roaming\npm\node_modules\autoprefixer\node_modules\browserslist\index.js

 

 

 

webstorm配置scss自动编译路径

激活webstorm2016如何激活webstorm2016永久激活webstorm2016

目录
相关文章
|
2月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
8月前
|
JavaScript
使用Webstorm快速启动Vue项目配置
使用Webstorm快速启动Vue项目配置
85 0
|
23天前
|
Web App开发 前端开发 编译器
CSS3私有前缀+新增盒模型相关属性(如果想知道CSS3私有前缀、新增盒模型相关属性的知识点,那么只看这一篇就足够了!)
CSS3私有前缀+新增盒模型相关属性(如果想知道CSS3私有前缀、新增盒模型相关属性的知识点,那么只看这一篇就足够了!)
|
2月前
|
负载均衡 前端开发 应用服务中间件
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
|
2月前
|
负载均衡 前端开发 应用服务中间件
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400(2)
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400(2)
|
2月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
46 2
|
8月前
|
前端开发 JavaScript UED
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
38 0
|
9月前
|
JavaScript
WebStorm配置代码模板【以vue模板为例,提供vue代码模板】
WebStorm配置代码模板【以vue模板为例,提供vue代码模板】
107 0
|
11月前
CSS3 浏览器适配(私有化前缀)
CSS3 浏览器适配(私有化前缀)
30 0
|
前端开发
《智能前端技术与实践》——第1章 开发环境配置——1.5 使用 WebStorm
《智能前端技术与实践》——第1章 开发环境配置——1.5 使用 WebStorm

热门文章

最新文章