webstorm环境安装配置(less+autoprefixer)

node安装:

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

1.下载node安装包并完成安装

2.在开始菜单打开node

webstorm环境安装配置(less+autoprefixer)

3.查看是否安装完成(npm是node自带安装的)

命令:node -v

   npm -v

webstorm环境安装配置(less+autoprefixer)

 

less安装:

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

1.安装命令:$ npm install -g less(-g为全局安装)

webstorm环境安装配置(less+autoprefixer)

2.查看是否安装完成

webstorm环境安装配置(less+autoprefixer)

3.在webstorm上安装编译less快捷键

webstorm环境安装配置(less+autoprefixer)

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

设置快捷键

webstorm环境安装配置(less+autoprefixer)

 

4.webstorm安装自动更新

 webstorm环境安装配置(less+autoprefixer)

 

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文件时自动新建css

webstorm环境安装配置(less+autoprefixer)

 

安装autoprefixer(css自动补全)

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

1.安装命令:npm install -g autoprefixer

webstorm环境安装配置(less+autoprefixer)

2.webstorm设置快捷键

webstorm环境安装配置(less+autoprefixer)

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

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

working directory:$ProjectFileDir$

//program路径地址,我的时全局安装,所以在c盘下

webstorm环境安装配置(less+autoprefixer)

 

 设置快捷键

webstorm环境安装配置(less+autoprefixer)

 3.完成,在css文件里按下快捷键就会自动补全