在Webstorm中使用Autoprefixer实现CSS自动补全

前段时间我写了一篇文章:WebStorm怎么设置实现自动编译less文件 利用lessc模块实现less文件自动编译城css文件。

但是有一个缺点,就是lessc编译后只能将less转换为css格式,并不能自动补全前缀。

我们可以用Autoprefixer模块来给css自动补全,实现多浏览器的兼容。

Autoprefixer使用起来很简单,它根据最新的W3C规范,自动补充CSS前缀并编写普通的CSS,生成旧浏览器的代码。

支持选择器(如:fullscreen和::selection),单元函数(calc()),at-rules(@supports和@keyframes)和属性。

编译前:

div {
     background : linear-gradient(to top, black, white);
     display : flex
}
::placeholder {
     color : #ccc
}

编译后:

div {
    background : -webkit-linear-gradient(bottom, black, white);
    background : linear-gradient(to top, black, white);
    display : -webkit-box;
    display : -webkit-flex;
    display : -moz-box;
    display : -ms-flexbox;
    display : flex
}
:-ms-input-placeholder {
    color : #ccc
}
::-moz-placeholder {
    color : #ccc
}
::-webkit-input-placeholder {
    color : #ccc
}
::placeholder {
    color : #ccc
}

Autoprefixer还可以自动删除过时的、不必要的前缀代码。

编译前:

div {
    -webkit-border-radius : 5px;
    border-radius : 5px
}

编译后:

div {
    border-radius : 5px
}

因为经过Autoprefixer处理,CSS将仅保留实际的浏览器前缀。

Autoprefixer的安装和配置:

1、首先当然是安装node.js

    参考我之前的那篇文章。

2、安装Autoprefixer

打开cmd控制台,输入下面一行npm命令,安装Autoprefixer模块:-g是全局安装,如果不加会安装在当前目录。

npm install autoprefixer -g

3、安装postcss-cli

Autoprefixer其实是postcss的插件,见:https://github.com/code42day/postcss-cli

npm install postcss-cli -g

4、配置External Tools

打开Webstorm设置,Preferences -> Tools -> External Tools,点击新增按钮,如图:

在Webstorm中使用Autoprefixer实现CSS自动补全 经验总结 第1张

Name:autoprefixer 

Tool settings:

       Program: 找到AppData下的文件postcss.cm  若找不到AppData,在地址栏输入%appdata%回车,或者在用户名文件夹后输入AppData即可,如下图

       Parameters:-u autoprefixer -o outputFile inputFile  (-u 插件名称 -o 输出文件 输入文件,注意文件顺序输出文件及输入文件 ,输入文件需要先新建,不能自动生成)

       Working directory:文件目录即可,可根据自己需要调整

在Webstorm中使用Autoprefixer实现CSS自动补全 经验总结 第2张

我的配置:如果您是Windows用户,可以直接复制,注意:Deshun换成您的用户名

       Program:C:\Users\Deshun\AppData\Roaming\npm\postcss.cmd

       Parameters:-u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$

       Working directory:$ProjectFileDir$

5、在需要转换的文件点击右键->External Tools->autoprefixer ,即可生成新增兼容前缀的文件

在Webstorm中使用Autoprefixer实现CSS自动补全 经验总结 第3张

由于Autoprefixer是CSS的后处理器,我们还可以将其与预处理器(如Sass,Stylus或LESS)一起使用。详情见:https://github.com/postcss/autoprefixer


注意:Autoprefixer不支持中文目录,并且路径中不能有空格,否则会报错:Input Error: You must pass a valid list of files to parse

未经允许不得转载:前端资源网 - w3h5 » 在Webstorm中使用Autoprefixer实现CSS自动补全

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)