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

目录
相关文章
|
前端开发 开发者
CSS预处理器Less、Scss
【10月更文挑战第3天】
310 59
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
452 58
|
存储 前端开发 开发者
深入了解 Sass 和 SCSS:CSS 预处理器的强大功能
Sass(Syntactically Awesome Stylesheets)是一个强大的 CSS 预处理器,为开发者提供了诸多高级特性,如变量、嵌套、混合、继承等,简化了 CSS 的编写和管理。SCSS 是 Sass 3 引入的新语法,完全兼容 CSS3,并增强了 Sass 的动态功能。本文详细介绍了 Sass 和 SCSS 的核心特性及其在实际开发中的应用,如变量定义、嵌套规则、混合、继承、以及常用的操作符与扩展功能。
609 0
|
JSON 前端开发 JavaScript
vite中静态资源(css、img、svg等)的加载机制及其相关配置
【8月更文挑战第3天】vite中静态资源(css、img、svg等)的加载机制及其相关配置
1897 1
|
前端开发 JavaScript
vite中css最佳实践:使用postcss完善项目中的css配置
【8月更文挑战第3天】使用postcss完善项目中的css配置
3931 1
|
前端开发 JavaScript
开发过程找不到css源文件?试试配置vite的css源文件映射
【8月更文挑战第3天】开发过程找不到css源文件?试试配置vite的css源文件映射
496 0
开发过程找不到css源文件?试试配置vite的css源文件映射
|
负载均衡 前端开发 应用服务中间件
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
|
10月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中