1:⚠️⚠️ 首先安装依赖 npm install --save-dev webpack style-loader css-loader postcss-loader sass-loader autoprefixer

2:然后配置webpack

module: { rules: [

          { test: /\.css$/, use: ['style-loader', 'css-loader'] },

            { test: /\.scss$/, use: [

                { loader: 'style-loader' },

                { loader: 'css-loader', options: { sourceMap: true, modules: true, localIdentName: '[local]_[hash:base64:5]' } },

                { loader: 'postcss-loader', options: { sourceMap: true, config: { path: 'postcss.config.js' // 这个得在项目根目录创建此文件 } } },

                //{loader: 'sass-loader', options: { sourceMap: true } }

]

            }

          ]

},

3:在项目根目录创建 postcss.config.js

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

4:package.json 文件里添加支持哪些浏览器

"browserslist": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "iOS 6", "last 3 iOS versions" ];

待webpack打包之后会自动加上浏览器前缀



flex兼容性之Webpack3+postcss+sass+css的更多相关文章

  1. 使用 PostCSS 进行 CSS 处理

    在 Web 应用开发中,CSS 代码的编写是重要的一部分.CSS 规范从最初的 CSS1 到现在的 CSS3,再到 CSS 规范的下一步版本,规范本身一直在不断的发展演化之中.这给开发人员带来了效率上 ...

  2. css flex兼容性

    我测试了一下css flex的兼容性 已经可以兼容到IE10了呀 为啥MDN上面的IE兼容性还是兼容到IE11 有点更新不及时的感觉

  3. 笔试常考--浏览器兼容性问题及解决方案(CSS)

    问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题现象:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 解决方案:css里加: ;;} 备注:这个是最常见的也 ...

  4. flex兼容性问题

    flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器) 如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南] 纯手写css兼容代码,需给每个使用的属性 ...

  5. flex组合流动布局实例---利用css的order属性改变盒子排列顺序

    flex弹性盒子 <div class="container"> <div class="box yellow"></div> ...

  6. sass css样式:@for循环、样式变量与#{} 变量插值

    /* sass 可以用写JS的思想来写CSS代码         *   #{}                 用来插值,大括号中填写需要插入的变量         *   @for 变量 from ...

  7. 兼容性所有浏览器的透明CSS设置

    兼容所有浏览器的透明CSS设置: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0. ...

  8. flex 兼容性写法

    flex http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰老师详解 box 用于父元素的样式: display: box; 该属 ...

  9. 兼容性很好的纯css圆角

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

随机推荐

  1. oracle 链接

    <properties> <!--配置Hibernate方言 --> <property name="hibernate.dialect" value ...

  2. Django-----加入MD5格式上传图片

    上传图片为什么要加 MD5 ? 答 :避免用户上传图片的时候图片名重复,而引起先上传的图片被后上传的图片所覆盖的失误! MD5是什么? 答:一种被广泛使用的密码散列函数,可以产生出一个128位(16字 ...

  3. XQuery:查询任何可作为 XML 形态呈现的数据,包括数据库

    XQuery 也被称为 XML Query,被设计用来查询 XML 数据. 学习这个 需要知道 HTML / XHTML XML / XML 命名空间 XPath XML 实例文档 我们将在下面的例子 ...

  4. css后代选择器

    后代选择器: <p><em>CSS</em>层叠样式</p> 使用后代选择器设置,之间用空格隔开: p em{font-size:40px;} 例子: ...

  5. maven安装操作

    首先检查我们的系统是否有安装JDK,检验方法:1.首先在我们的“文件资源管理器”地址栏输入cmd.在“文件资源管理器”地址栏输入cmd命令后,按下键盘上的“Enter”键,进入黑科技模式.在我们的“D ...

  6. 爬坑Linux

    一.把cmd换成cmder 1.下载迷你版的cmder(因为win10的linux就是BASH,完整版的cmder也带这个,多余,还下载很慢),下载的是一个rar的文件,直接解压就可以了 2.将cmd ...

  7. PythonStudy——内存管理机制 Memory management mechanism

    一.变量与对象 关系图如下: 1.变量:通过变量指针引用对象 变量指针指向具体对象的内存空间,取对象的值. 2.对象:类型已知,每个对象都包含一个头部信息(头部信息:类型标识符和引用计数器) 注意: ...

  8. SSH原理及操作

    1:公钥与私钥(public and private key) 公钥:提供给远程主机进行数据加密的行为 私钥:远程主机收到客户端使用公钥加密数据后,在本地端使用私钥来解密 2:公钥与私钥进行数据传输时 ...

  9. Vue 表单校验 vee-validate

    gitHub 地址:https://github.com/baianat/vee-validate 官网API 地址:https://baianat.github.io/vee-validate/ap ...

  10. UBUNTU中使用pip安装,提示cannt import main问题

    在pip==8.1.1版本中,使用pip install Django==1.8.16时,提示 Traceback (most recent call last):  File "/usr/ ...