Webstorm配置CSS/SCSS自動補全兼容前綴autoprefixer插件

關於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