深井冰_01
深井冰_01
  • 发布:2016-06-20 20:05
  • 更新:2020-06-14 23:40
  • 阅读:11749

HBuilder中Autoprefixer的配置方法

分类:HBuilder

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

关于Autoprefixer

当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:

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

编译成:

a {  
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 同样会清理过期的前缀,因此下面的代码:

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

编译成:

a {  
border-radius : 5px  
}

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

安装node.js

(略)

安装Autoprefixer,

见https://github.com/postcss/autoprefixer:
npm install autoprefixer -g
mac下可能需要加sudo,或者是不是全局安装(-g)那就看你自己的环境了。
如npm太慢,可使用 NPM 镜像的https://npm.taobao.org/

安装postcss-cli

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

配置外部工具

打开HBuilder,运行-外部工具-外部工具配置,如图:


新建一个外部工具配置
名称填写autoprefixer(这个随意,就是起个名字)
要执行的命令或文件填写npm安装目录\postcss.cmd(mac下应为npm安装目录\postcss)如

C:\Users\wu\AppData\Roaming\npm\postcss.cmd

工作目录填写${project_loc}
参数填写-u autoprefixer -o ${resource_loc} ${resource_loc}
然后点击应用,如下图

使用autoprefixer

点击你的css、sass文件,然后右键,依次点击外部工具-autoprefixer(此处为你新建外部工具的名称)等待编译,编译完毕即可

配置快捷键

工具-选项-常规-快捷键,搜索autoprefixer(此处为你新建外部工具的名称),设置快捷键即可

4 关注 分享
l***@qq.com 4***@qq.com hylong 7***@qq.com

要回复文章请先登录注册

only

only

在less里用报错呀
D:\daima\2016\huiyou_2\css\style.less:100:5: Unknown word
color: #cac9c9;
.transition(color 0.3s ease-out);
^
}
2016-06-21 09:35