1. 程式人生 > >webStorm配置autoprefixer

webStorm配置autoprefixer

解決flex需要加字首的問題,以下內容是我花了一天的時間才弄出來的,希望對大家有所幫助:

首先,需要安裝node,版本要求6.x.x(或更高)

第一步:安裝autoprefixer

cnpm install autoprefixer -g

第二步:安裝postcss-cli

cnpm install postcss-cli -g

第三步:開啟webstorm-》file->setting->tools->externalTools

引數:

Program:C:\Program Files\nodejs\postcss.cmd(找到自己路徑下的postcss.cmd

Arguments:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$

Working directory:$ProjectFileDir$

配置瀏覽器的相容版本:

找到autoprefixer->node_modules->browserslist->index.js,修改broswerslist.defaults為以下設定:

// Default browsers query browserslist.defaults = [   '> 0.5%',   'iOS >= 7',   'Android > 4.0',   'last 2 versions',   'Firefox ESR',   'not dead' ]

以下是生成的效果圖: