webStorm配置postcss-cssnext插件,在版本11和2016中测试可行

 

WebStorm 安装postcss插件

webstorm不愧为一个高级的前端开发工具,光是它天生集成Emmet这一点,你就应该喜欢上它.

环境win7旗舰版64位

1、安装node.js最新版本

正常默认安装

2、运行npm(nodejs包装器)命令

产看版本信息命令:

3、全局安装postcss,postcss-cli,postcss-cssnext,cssgrace

安装postcss插件

>npm install -g postcss

安装postcss-cli命令行插件

>npm install -g postcss-cli

安装postcss-cssnext插件(核心:包括浏览器前缀等)

>npm install -g postcss-cssnext

安装cssgrace(IE浏览器兼容插件)

>npm install -g cssgrace

4、设置默认浏览器范围

在目录(作者是win7系统，xp的目录自己去找)

C:\Users\Administrator\AppData\Roaming\npm\node_modules\postcss-cssnext\node_modules\browserslist

找到index.js，修改browserslist.defaults中内容：

// Default browsers query

browserslist.defaults = [

   '> 1%',

    'last 8 versions',

   'Firefox ESR'

];

让每种浏览器的最后8个版本都支持，默认是最后2个版本

5、Postcss工具测试

>cdC:\Users\Administrator\AppData\Roaming\npm

在这个目录里新建一个test.css文件,内容

.test{

   display:flex;

}

.test1{

   display:inline-block; 

}

然后运行如

>postcss.cmd --use postcss-cssnext --use cssgrace -o t.css test.css

将test.css用postcss-cssnext和cssgrace这两个插件转换输出到t.css中,内容如下:

.test{

   display:-webkit-box;

   display:-webkit-flex;

   display:-ms-flexbox;

   display:flex;

}

.test1{

   display:inline-block;

   *display:inline;

   *zoom:1; 

}

这里直接做了浏览器前缀转换和兼容性转换.

Postcss命令参考:https://github.com/postcss/postcss-cli

也可以直接输入 postcss -h查看帮助

6、安装WebStorm IDE工具(略,自己看百度,下一步下一步...)

7、在Webstorm中添加postcss外部工具

打开file->settings->tools->ExternalTools,点加号添加。如下图：

Name:postcss (随便取个名)

Tool Settings

Program:C:\Users\Administrator\AppData\Roaming\npm\postcss.cmd(XP环境为另外的路径)

Parameters:--use postcss-cssnext --use cssgrace -o$FileDir$\$FileNameWithoutAllExtensions$.css $FileDir$\$FileName$ (参数设置)

WorkingDirectory:$ProjectFileDir$ (工作路径设置为当前项目目录)

 

8、定义快捷键

打开file->settings->keymap->ExternalTools找到刚才添加的选项,定义不重复的快捷键

9、IDE测试

随便写一个.less或者.scss文件,写好后点右键如下图:

输出的test.css文件效果为: