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兼容性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
使用JavaScript为Kindeditor自定义按钮增加Audio标签
这篇文章主要介绍了使用JavaScript为Kindeditor自定义按钮增加Audio标签的方法,KindEditor是一套开源的HTML可视化编辑器,需要的朋友可以参考下2016-03-03浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
今天小编就为大家分享一篇浅谈layui数据表格判断问题(加入表单元素),设置单元格样式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
最新评论