webpack解决css兼容性问题小结
更新时间：2024年05月15日 09:39:05 作者：小强有个dream
这篇文章主要介绍了webpack解决css兼容性问题小结,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
webpack解决css兼容性示例
npm install --save-dev postcss-loader autoprefixer
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
},
// mode: 'production', // 或者 'production'
module: {
rules: [{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}]
},
}创建postcss.config.js文件
postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {
browsers: [
'> 1%',
'last 2 versions',
'not ie <= 8'
]
}
}
}src/index.js
import './module.css'
src/module.css
body {
display: flex;
}在打包的js文件中搜索webkit 或在浏览器打包审查元素， 可以看到前缀是有生效的
到此这篇关于webpack解决css兼容性示例：的文章就介绍到这了,更多相关webpack解决css兼容性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
![js中[]、{}、()区别示例浅析](//img.jbzj.com/images/xgimg/bcimg0.png)
很多人都知道在js中[]表示的是数组对象,{}表示的是对象,但是这两者的区别却说不出来,下面这篇文章主要给大家介绍了关于js中[]、{}、()区别的相关资料,需要的朋友可以参考下2023-06-06
坐标轴刻度作为直角坐标系中重要的组成部分,我们需要学会合理的设置坐标轴的刻度,下面这篇文章主要给大家介绍了关于坐标轴刻度取值算法之源于echarts的y轴刻度计算需求的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了ES6中的箭头函数,结合实例形式详细分析了ES6中箭头函数的基本语法、特性、使用方法与相关注意事项,需要的朋友可以参考下2017-04-04
JavaScript 处理Iframe自适应高度(同或不同域名下)
Iframe自适应高度一直都备受关注，接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应，感兴趣的朋友可以参考下哈2013-03-03
这篇文章主要介绍了基于javascript实现简单计算器功能的相关资料,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了PhotoSwipe异步动态加载图片方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了小程序自定义单页面、全局导航栏的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
设置table高度想必大家都会，直接在table标签中设置下不就行了吗？这是静态的，如果要动态设置你会吗？下面的实例将教会大家2014-10-10
有一些下载网站为了整体的统一，尽量的控制软件介绍的字数显示，要不因为字数介绍太多导致用户看到下载链接比较靠后等原因而一个小功能的实现。2009-09-09
本篇文章主要介绍了微信小程序入门教程，现在分享给大家，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-11-11
![js中[]、{}、()区别示例浅析](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论