为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。

1.安装

  1. cnpm i postcss-loader autoprefixer --save-dev

2.在根目录新建一个postcss.config.js文件

  1. module.exports = {
  2. plugins: [
  3. require('autoprefixer')
  4. ]
  5. }

这就是对postCSS一个简单的配置,引入了autoprefixer插件。让postCSS拥有添加前缀的能力,它会根据 can i use 来增加相应的css3属性前缀。

3.配置

4.输入webpack进行打包,最终效果:

前端必学内容:webpack(模块打包器

webpack3 学习内容,点击即可到达

(1).webpack快速入门——如何安装webpack及注意事项

(2).webpack快速入门——webpack3.X 快速上手一个Demo

(3).webpack快速入门——配置文件:入口和出口,多入口、多出口配置

(4).webpack快速入门——配置文件:服务和热更新

(5).webpack快速入门——CSS文件打包

(6).webpack快速入门——配置JS压缩,打包

(7).webpack快速入门——插件配置:HTML文件的发布

(8).webpack快速入门——CSS中的图片处理

(9).webpack快速入门——CSS分离与图片路径处理

(10).webpack快速入门——处理HTML中的图片

(11).webpack快速入门——CSS进阶,Less文件的打包和分离

(12).webpack快速入门——CSS进阶:SASS文件的打包和分离

(13).webpack快速入门——CSS进阶:自动处理CSS3前缀

(14).webpack快速入门——CSS进阶:消除未使用的CSS

(15).webpack快速入门——给webpack增加babel支持

(16).webpack快速入门——打包后如何调试

(17).webpack快速入门——实战技巧:开发和生产并行设置

(18).webpack快速入门——实战技巧:webpack模块化配置

(19).webpack快速入门——实战技巧:优雅打包第三方类库

(20).webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

(21).webpack快速入门——实战技巧:webpack优化黑技能

(22).webpack快速入门——集中拷贝静态资源

(23).webpack快速入门——Json配置文件使用

如果我的内容对你有帮助,欢迎打赏

webpack快速入门——CSS进阶:自动处理CSS3前缀的更多相关文章

  1. webpack快速入门——CSS进阶,Less文件的打包和分离

    1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...

  2. webpack快速入门——CSS进阶:SASS文件的打包和分离

    1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...

  3. webpack快速入门——CSS进阶:消除未使用的CSS

    使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板 ...

  4. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  5. webpack快速入门——CSS中的图片处理

    1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...

  6. webpack快速入门——CSS分离与图片路径处理

    1.在终端安装extract-text-webpack-plugin 2.引入插件 const extractTextPlugin = require("extract-text-webpa ...

  7. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  8. webpack快速入门——如何安装webpack及注意事项

    1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...

  9. webpack快速入门——webpack3.X 快速上手一个Demo

    1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...

随机推荐

  1. SSIS 遍历目录,把文件内容导入数据库

    最近接手一个项目,程序的基本框架是:程序A导出数据,以.tsv格式存储,数据列之间以tab间隔:程序B吃文档,把数据导入到数据库中,并把处理过的文档备份/移动到指定的目录中.为了快速开发,程序B设计成 ...

  2. 【绝对给力】Android开发免豆资料(教程+工具+源码)地址汇总

    教程下载: [免费]android界面效果全汇总.pdf http://down.51cto.com/data/209179 Android终极开发教程[pdf高清版] http://down.51c ...

  3. Windows Defender还原误删文件

    Win 10 新版本的Windows Defender隔离/删除的文件没有还原的选项,导致被误删的文件无法在威胁记录中恢复.经过尝试发现可以通过修改注册表添加 “还原” 选项 打开注册表,找到 HKE ...

  4. k8s之使用secret获取私有仓库镜像

    一.前言 其实这次实践算不上特别复杂,只是在实践过程中遇到了一些坑,以及填坑的方法是非常值得在以后的学习过程中参考借鉴的 二.知识准备 1.harbor是一个企业级的镜像仓库,它比起docker re ...

  5. CryptoZombies学习笔记——Lesson2

    第二课是僵尸猎食,将把app变得更像一个游戏,添加多人模式,建立更多创造僵尸的方法. chapter1 依然是简介 chapter2:映射和地址 映射相当于一个索引,指向不同地址,不同地址存储的数据不 ...

  6. Daily Scrumming* 2015.12.15(Day 7)

    一.团队scrum meeting照片 二.成员工作总结 姓名 任务ID 迁入记录 江昊 任务1036 https://github.com/buaaclubs-team/temp-front/com ...

  7. Eclipse,代码中有错误,项目中却不显示红叉

    ***修改eclipse 代码提示级别1.单个项目修改项目上右键-->properties-->java compiler-->building-->enable projec ...

  8. (第二周)读《我是一只IT小小鸟》有感

    读了蒋宇东学长的这篇描述他成长经历和生活感悟的博文,我真的收获了很多,有一种“相见恨晚”的感觉.同为航院的学子,我们有太多太多相同的生活学习经历. 我已经是一名大三的学生了,不知不觉中我大学生活的大部 ...

  9. Linux命令(十六) 压缩或解压缩文件和目录 zip unzip

    目录 1.命令简介 2.常用参数介绍 3.实例 4.直达底部 命令简介 zip 是 Linux 系统下广泛使用的压缩程序,文件压缩后扩展名为 ".zip". zip 命令用来将文件 ...

  10. 使用ajax异步上传文件或图片(配合php)

    //html代码 <form enctype="multipart/form-data" id="upForm"> <input type=& ...