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文件效果为: