HBuilder中配置Autoprefixer的方法

发布时间：2020-07-15 16:25:13 阅读：2292 作者：Levine139 栏目：web开发

开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

一、Autoprefixer是什么？

Autoprefixer是一个后处理程序，你可以同Sass，Stylus或LESS等预处理器共通使用。它适用于普通的CSS，而你无需关心要为哪些浏览器加前缀，只需使用W3C最新的规范关注于实现。

如书写属性：

a{
  display: flex;
}

执行autoprefixer后自动生成相关信息：

a{
  display: -webkit-box;    
  display: -webkit-flex;    
  display: -ms-flexbox;    
  display: flex
}

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

执行autoprefixer后：

a{
  border-radius: 5px
}

二、怎样引入到HBuilder中？

1、安装node.js

下载安装方法参考：http://www.runoob.com/nodejs/nodejs-install-setup.html

2、安装Autoprefixer

下载路径：https://github.com/postcss/autoprefixer

Windows下（没有mac，mac下情况不清楚）：

npm install autoprefixer -g

3 、安装postcss-cli

npm install postcss-cli -g

4、HBuilder中配置

打开HBuilder，运行-外部工具-外部工具配置，新建外部工具配置，如图：

HBuilder中配置Autoprefixer的方法

名称填写autoprefixer（这个随意）;

要执行的命令或文件填写npm安装目录../postcss.cmd；

工作目录填写${project_loc}；

参数填写-u autoprefixer -o ${resource_loc} ${resource_loc}

配置完后应用，运行。

5、HBuilder中使用

在你的css、sass文件中，右键选择外部工具-autoprefixer（此处为你新建外部工具时的名称）等待编译完成即可

向AI问一下细节

猜你喜欢