webpack4.x中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容

当前我们在写css样式的时候总是要处理浏览器兼容问题，那就是加前缀问题，可是我们在开发的时候比如：
直接写个：

.className{display: flex;
}

想变成下面这种的

.className{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
}

以下就是配置方法：

安装

添加浏览器前缀需要下载的插件autoprefixer

npm install --save-dev css-loader style-loader postcss-loader autoprefixer

配置webpack.config.js

{test: /\.css$/,use: [{loader: 'style-loader'},{loader: 'css-loader',options: {modules: true,importLoaders: 1,minimize: true,localIdentName: '[local]_[hash:base64:5]'}},{loader: 'postcss-loader'}}

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

在项目根目录创建 postcss.config.js，并且设置支持哪些浏览器，必须设置支持的浏览器才会自动添加添加浏览器兼容

module.exports = {plugins: [require('autoprefixer')({"browsers": ["defaults","not ie < 11","last 2 versions","> 1%","iOS 7","last 3 iOS versions"]})]
};

browsers配置

webpack4.x中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容相关推荐

webpack4.x中使用postcss-loader、autoprefixer给CSS属性自动添加前缀
由于市面上存在几大主流浏览器,当我们在编写CSS相关属性的时候,需要添加兼容各浏览器的前缀,但是这样非常耗时.影响工作效率. 比如编写: 1 .searchBox{ 2 display: flex; ...
webpack中loader加载器配置postCss自动添加CSS兼容前缀
配置postCSS自动添加css的兼容前缀前言在这里我使用VScode为编辑器 html文件中 <!DOCTYPE html> <html lang="en" ...
Vue3下PostCSS Loader has been initialized using an options that does not match the API schema的问题解决
本人初学Vue,今天打算用Vue3写一个简单的项目.可在刚开始项目搭建和初始化配置时出现了这个关于postcss的问题,查阅了许多技术博客方法均尝试无效(也有可能是解决方向不对),无奈请教某前端大神后 ...
关于在VUE中使用sass loader报错的问题
关于在VUE中使用sass loader报错的问题一般是关于依赖问题因为npm的跨境问题导致很多包下载断点,故使用淘宝镜像方可解决问题.能处理百分之七十的问题关于webpack问题可能由于we ...
R语言ggplot2可视化：为图像中的均值竖线、中位数竖线、 geom_vline添加图例（legend）
R语言ggplot2可视化:为图像中的均值竖线.中位数竖线. geom_vline添加图例(legend) 目录
JS中常遇到的浏览器兼容问题和解决方法
JS中常遇到的浏览器兼容问题和解决方法参考文章: (1)JS中常遇到的浏览器兼容问题和解决方法 (2)https://www.cnblogs.com/wws-bk/p/9770834.html 备忘 ...
Vue中实现检测当前是否为IE模式(极速模式还是兼容模式)
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面搭建起来的Vue前端项目中 ...
js 获取某iframe中document，浏览器兼容
/// <summary> /// 获取iframe中document,浏览器兼容 /// 王洪岐 /// id:iframe的ID /// </summary> functi ...
vuex中的值变化页面重新渲染_浅谈浏览器的渲染过程，重绘与回流
浏览器的渲染过程首先,我们先来了解一下浏览器的渲染过程是什么样的,也就是说浏览器把一堆代码呈现到页面上的过程是什么样子的,浏览器采用流式布局模型(Flow Bsaed Layout),根据下图,我们 ...

webpack4.x中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容

安装

配置webpack.config.js

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

webpack4.x中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容相关推荐

最新文章

热门文章