1.安装node.js

2.安装Autoprefixer

3.安装postcss-cli

4.配置外部工具

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

新建一个外部工具配置

名称填写autoprefixer(这个随意,就是起个名字)

要执行的命令或文件填写npm安装目录\postcss.cmd,我这里是:

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

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

使用autoprefixer

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

配置快捷键

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

初体验:

使用前:

使用后

参考文章:http://www.bcty365.com/content-146-5024-1.html

【Autoprefixer】Hbuilder中配置Autoprefixer的更多相关文章

  1. Hbuilder中配置cmd

    步骤: 1. ①运行——>外部工具——>外部工具 配置2.  新建一个名为cmd(随意命名)的外部工具: 名称:cmd 要执行的命令或文件:C:\Windows\System32\cmd. ...

  2. SASS环境搭建及HBuilder中sass预编译配置

    ---------------------------------Ruby环境安装-------------------------------- 至于为什么要安装ruby环境请移步:https:// ...

  3. Hbuilder中添加Babel自动编译

    Hbuilder是一个不错的H5开发IDE. Babel是EMCAScript最新标准的编译器,很多ES的最新特性都可以在Babel中尝试. 如果可以有办法在Hbuilder中直接使用ES6,并通过B ...

  4. WebLogic的安装和配置以及MyEclipse中配置WebLogic

    WebLogic 中间件: 是基础软件的一大类,属于可复用软件的范畴,顾名思义,中间件属于操作系统软件与应用软件的中间,比如:JDK,框架,weblogic. weblogic与tomcat区别 : ...

  5. ASP.NET Core 在 JSON 文件中配置依赖注入

    前言 在上一篇文章中写了如何在MVC中配置全局路由前缀,今天给大家介绍一下如何在在 json 文件中配置依赖注入. 在以前的 ASP.NET 4+ (MVC,Web Api,Owin,SingalR等 ...

  6. Windows Server2008 下用于.NET Framework3.0版本的问题无法在IIS7中配置.NET Framework4.0节点的问题

    Windows Server 2008中,功能列表安装的为.NET Framework3.0. 试了N种方法未升级为.NET Framework4.0(哪位如果可以直接升级为4.0或3.5希望能够分享 ...

  7. Ubuntu中配置Java环境变量时,出现command not found问题解决记录

    百度出Ubuntu中配置Java环境变量时,在利用sudo gedit /etc/profile 对profile编辑后, 在terminal中输入 sudo source /etc/profile, ...

  8. Linux虚拟机中配置JDK环境变量

    前提准备: 1,安装好Linux系统 2,下载好可以将文件传输到Linux系统工具例如:WinSCP 3,在windows中下载Linux版JDK: http://download.oracle.co ...

  9. visual studio 2013 中配置OpenCV2.4.13 姿势

    首先在path中添加 “C:\OpenCV\opencv\build\x64\vc12\bin”   (地址随实际变化) 注:添加的都是*86不使用*64 在visualstudio 2013中配置 ...

随机推荐

  1. JS实现最短路径之迪杰斯特拉(Dijkstra)算法

    最短路径: 对于网图来说,最短路径是指两个顶点之间经过的边上权值和最少的路径,我们称第一个顶点是源点,最后一个顶点是终点 迪杰斯特拉 ( Dijkstra) 算法是并不是一下子就求出 了 Vo 到V8 ...

  2. 如鹏网学习笔记(八)CSS

    CSS 一.CSS简介 1,CSS (Cascading Style Sheets) 级联样式表 ,是一种计算机语言,用来控制HTML内容的显示效果 2,CSS预先定义了众多的和显示效果有关的样式属性 ...

  3. Hadoop源码学习笔记(1) ——第二季开始——找到Main函数及读一读Configure类

    Hadoop源码学习笔记(1) ——找到Main函数及读一读Configure类 前面在第一季中,我们简单地研究了下Hadoop是什么,怎么用.在这开源的大牛作品的诱惑下,接下来我们要研究一下它是如何 ...

  4. 撩课-Python-每天5道面试题-第6天

    一. 函数的概念是什么? 在Python中如何定义?使用场景是什么? 概念 写了一段代码实现了某个小功能; 然后把这些代码集中到一块, 起一个名字; 下一次就可以根据这个名字再次使用这个代码块, 这就 ...

  5. 前端(七):ES6一些新特性

    一.变量 1.var关键字的弊端 var关键字的弊端:1.可以重复声明变量:2.无法限制变量修改:3.没有块级作用域,只有函数作用域. <html lang="en"> ...

  6. Mac下使用sublime Text打开隐藏目录

    我们用 sublime Text 打开时,默认是看到非隐藏的目录和文件,如下图: 这时候在这个节目,按下 command +shift + 句号 快捷键,会自动切换 隐藏状态的, 这时候就可以切换成下 ...

  7. JSP九个内置对象及指令、动作标签

    一.JSP九大内置对象 (一)JSP中无需创建就可以使用的9个对象 输入输出对象 1.response(HttpServletResponse):处理JSP生成的响应,然后将响应结果发送给客户端.是s ...

  8. csharp: SQL Server 2005 Database Backup and Restore using C#

    1.第一种方式: using SQLDMO;//Microsoft SQLDMO Object Library 8.0 /// <summary> /// 数据库的备份 /// 涂聚文注: ...

  9. PHP new StdClass() 创建空对象

    PHP可以用 $object = new StdClass(); 创建一个没有成员方法和属性的空对象.很多时候,程序员们会将一些参数配置项之类的信息放在数组中使用,但是数组操作起来并不是很方便,很多时 ...

  10. chrome devtools的debug相关

    搜索ctrl+p:搜索Sources面板中指定的文件:然后在主窗口文件标签右键选择reveal in navigator可以在目录中显示当前文件.ctrl+f:搜索devtool主显示窗口所在文件的指 ...