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

1.安装

cnpm i postcss-loader autoprefixer --save-dev

2.在当前webpack.base.conf.js目录新建一个postcss.config.js文件

module.exports = {
plugins: [
require('autoprefixer')
]
}

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

3.配置

方法1:此方法需要新建postcss.config.js文件

    module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}

方法二:此方法不需要postcss.config.js文件

module.exports = {
module: {
rules: [
{
test: /\.(c|le)ss$/,
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'postcss-loader',
options: {
plugins: [
require("autoprefixer") /*在这里添加*/
]
}
},
{
loader: 'less-loader',
options: {
sourceMap: true
}
}
]
}
],
}
}

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

webpack打包css自动添加css3前缀的更多相关文章

  1. webpack2使用ch7-loader解析css 自动添加浏览器前缀

    1 目录结构  安装的依赖 "autoprefixer": "^6.7.7", "css-loader": "^0.28.0&qu ...

  2. Webpack打包css后z-index被重新计算的解决方法

    发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...

  3. 使用scss为css样式自动添加浏览器前缀

    当一个浏览器实现一个新的属性.值或者选择器,而这个特征还不是处于候选推荐标准状态的时候,这属性的前面会添加一个前缀以便于它的渲染引擎识别. 浏览器使用前缀来尝试一些新属性.值和选择器,即使他们还没有最 ...

  4. webpack2使用ch8-loader解析less less自动添加浏览器前缀

    1 目录结构  安装依赖 "less": "^2.7.2","less-loader": "^4.0.3", 2 web ...

  5. webpack打包css

    1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...

  6. webpack插件自动加css3前缀

    想要webpack帮忙自动加上“-webkit-”之类的css前缀,我们需要用到postcss-loader和它的插件autoprefixer 1.安装 npm i postcss-loader au ...

  7. css自动添加浏览器兼容前缀 autoprefixer设置

    Autoprefixer设置: preferences>key Bindings-Users {"keys":["ctrl+alt+x"],"c ...

  8. 如何配置webpack让浏览器自动补全前缀

    一.postcss-loader有什么用? PostCSS 本身是一个功能比较单一的工具.它提供了一种方式用 JavaScript 代码来处理 CSS.它负责把 CSS 代码解析成抽象语法树结构(Ab ...

  9. 使用webpack打包css和js

    1.安装webpack. npm install webpack -g 2.创建一个文件夹app. 3.新建文件test.js. require("!style-loader!css-loa ...

随机推荐

  1. 移动APP 微信支付完整过程(wxPay 方案一)

    apicloud.weixinpay官方提供了两种方案. 本模块封装了两套支付方案: 方案一:开发者通过 getOrderId.payOrder 自己处理签名过程(微信开放平台建议把 getOrder ...

  2. String类的特点和使用步骤

    概述 java.lang.String 类代表字符串.Java程序中所有的字符串文字(例如 "abc" )都可以被看作是实现此类的实例 类 String 中包括用于检查各个字符串的 ...

  3. Django的Error汇总

    title: Django学习笔记 catalog: true subtitle: 11. Django_Error汇总 date: 2018-12-14 10:17:28 --- Django的Er ...

  4. BZOJ 2959: 长跑 LCT_并查集_点双

    真tm恶心...... Code: #include<bits/stdc++.h> #define maxn 1000000 using namespace std; void setIO ...

  5. Emoji表情处理工具类

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class EmojiToString { /** * 将 ...

  6. Python实现ATM+购物商城

    需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 每月22号出账单,每月10号为还款日,过期未还,按欠 ...

  7. swift-UITableView的基本使用

    废话不多说了,直接贴我今天写的代码吧:如果新手有什么不懂的,可以发我邮箱. // //  singleInfo.swift            个人信息 //  Housekeeper // //  ...

  8. IE与标准浏览器对事件处理的区别

    1.监听 标准 element.addEventListener('click',observer, useCapture); element.removeEventListener('click', ...

  9. Android 最新面试题

    1. Intent的几种有关Activity启动的方式有哪些,你了解每一个含义吗? Intent的一些标记有FLAG_ACTIVITY_BROUGHT_TO_FRONT .FLAG_ACTIVITY_ ...

  10. springmvc 监听器getWriter() has already been called for this response问题

    springmvc 监听器getWriter() has already been called for this response问题 在监听器中,如果return true,就不要使用 respo ...