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

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 关注 分享
lconguo@qq.com 401475235@qq.com hylong 775654394@qq.com

要回复文章请先登录注册

455076199@qq.com

455076199@qq.com

请问老是报错:Input Error: You must pass a valid list of files to parse
2020-06-14 23:40
804812641@qq.com

804812641@qq.com

回复 1030917584@qq.com :
我也是这样,请问老哥解决了吗,这是什么问题,我还在这困着呢,求救
2019-08-07 17:41
1030917584@qq.com

1030917584@qq.com

按照你的步骤来的,结果只是多出了一串灰色文字
“/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5ld19maWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtDQUNDLGFBQWE7QUFDZCIsImZpbGUiOiJuZXdfZmlsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJhe1xyXG5cdGRpc3BsYXk6IGZsZXg7XHJcbn1cclxuIl19 */”,

“<已终止> autoprefixer [程序]” 这两句话
2019-04-13 14:07
1509619079@qq.com

1509619079@qq.com

完整HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
border-radius: 5px;
}
</style>
</head>
<body>
<div class=""></div>
</body>
</html>
2018-03-12 10:17
1509619079@qq.com

1509619079@qq.com

大佬求你帮我看看,按照你要求都安装了,在html中的style里运行不起作用啊!反而会报错!!!

报错内容:
CssSyntaxError: C:\Users\Administrator\Documents\HBuilderProject\tex\index.html:10:3: Unknown word

8 | border-radius: 5px;
9 | }
> 10 | </style>
| ^
11 | </head>
12 | <body>
2018-03-12 10:16
840710263@qq.com

840710263@qq.com

老是报错说不是可运行的命令,这两个东西我都已经装了啊
2017-05-01 11:30
840710263@qq.com

840710263@qq.com

这个命令的文件路劲应该怎么写?我怎么都没找到
2017-05-01 11:23
大王

大王

mac下提示 env: node: No such file or directory
解决方法:

sudo vi /usr/local/lib/node_modules/postcss-cli/bin/postcss


#!/usr/bin/env node
修改为
#!/usr/bin/env /usr/local/bin/node
2017-02-16 15:06
lconguo@qq.com

lconguo@qq.com

执行命令行时发生了异常。
Cannot run program "node" (in directory "D:\phpStudy\WWW\nodejs"): CreateProcess error=2, ϵͳÕҲ»µ½ָ¶
2016-09-28 22:48
深井冰_01

深井冰_01 (作者)

回复 only :
应该是你代码的问题吧,这个调用的是node命令,应该不会出错的
2016-06-21 15:00