node安裝：

參考地址：http://www.runoob.com/nodejs/nodejs-install-setup.html

1.下載node安裝包并完成安裝

2.在開始菜單打開node

3.查看是否安裝完成（npm是node自帶安裝的）

命令：node -v

　　　npm -v

?

less安裝：

參考地址：http://less.bootcss.com/#getting-started

1.安裝命令：$ npm install -g less（-g為全局安裝）

2.查看是否安裝完成

3.在webstorm上安裝編譯less快捷鍵

program:D:\node\node.exe　　//node.exe安裝路徑

parameters:C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$ $FileDir$\$FileNameWithoutExtension$.css

working directory:D:\node

設(shè)置快捷鍵

?

4.webstorm安裝自動(dòng)更新

?

?

program：C:\Users\Administrator\AppData\Roaming\npm\lessc.cmd

arguments：

$FileParentDir(less)$$FileDirPathFromParent(less)$$FileName$
$FileParentDir(less)$$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css

//說明

$FileParentDir(less)$ 是獲取 less 目錄的路徑

$FileDirPathFromParent(less)$ 是獲取 less 文件到 less 目錄的路徑

$FileNameWithoutExtension$ 是獲取 less 文件不帶后綴的名字

5.完成，新建less文件時(shí)自動(dòng)新建css

?

安裝autoprefixer(css自動(dòng)補(bǔ)全)

參考http://www.css88.com/archives/5670

1.安裝命令：npm install -g autoprefixer

2.webstorm設(shè)置快捷鍵

program:C:\Users\Administrator\AppData\Roaming\npm\postcss.cmd

parameters:-u autoprefixer -o $FileDir$\$FileName$ ?$FileDir$\$FileName$

working directory:$ProjectFileDir$

//program路徑地址，我的時(shí)全局安裝，所以在c盤下

?

?設(shè)置快捷鍵

?3.完成，在css文件里按下快捷鍵就會(huì)自動(dòng)補(bǔ)全

?

轉(zhuǎn)載于:https://www.cnblogs.com/zzhbx/p/6944922.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的webstorm环境安装配置（less+autoprefixer）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。