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使用正则表达式实现注册登入校验

    javascript使用正则表达式实现注册登入校验

    这篇文章主要为大家详细介绍了javascript使用正则表达式实现注册登入校验,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Js中的FileReader相关操作方法总结

    Js中的FileReader相关操作方法总结

    FileReader是前端进行文件处理的一个重要的API,特别是在对图片的处理上,这篇文章主要给大家介绍了关于Js中FileReader相关操作方法的相关资料,需要的朋友可以参考下
    2024-07-07
  • 小程序上传文件至云存储的实现

    小程序上传文件至云存储的实现

    在小程序云开发中,要实现上传文件至云存储,有两种方案:云函数和HTTP API,本文主要讲讲如何使用HTTP API实现小程序外上传文件至云存储,感兴趣的可以了解一下
    2022-01-01
  • 微信小程序ibeacon三点定位详解

    微信小程序ibeacon三点定位详解

    这篇文章主要为大家详细介绍了微信小程序ibeacon三点定位的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 使用JavaScript为Kindeditor自定义按钮增加Audio标签

    使用JavaScript为Kindeditor自定义按钮增加Audio标签

    这篇文章主要介绍了使用JavaScript为Kindeditor自定义按钮增加Audio标签的方法,KindEditor是一套开源的HTML可视化编辑器,需要的朋友可以参考下
    2016-03-03
  • 基于Leaflet的Webgis经纬网格功能实现

    基于Leaflet的Webgis经纬网格功能实现

    本文将介绍一款Leaflet的经纬网插件,基于这款经纬网插件,详细介绍如何实现经纬网功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2023-12-12
  • 浅谈layui数据表格判断问题(加入表单元素),设置单元格样式

    浅谈layui数据表格判断问题(加入表单元素),设置单元格样式

    今天小编就为大家分享一篇浅谈layui数据表格判断问题(加入表单元素),设置单元格样式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 几个比较实用的JavaScript 测试及效验工具

    几个比较实用的JavaScript 测试及效验工具

    JavaScript 是一款强大的广泛运用于现代Web站点及应用的脚本语言。作为一个技艺精湛的 Web 开发者,掌握JavaScript可以增强用户的使用体验,提供交互及富客户端等功能。
    2010-04-04
  • 详细聊聊JavaScript是如何影响DOM树构建的

    详细聊聊JavaScript是如何影响DOM树构建的

    DOM (Document Object Model) 的全称是文档对象模型,它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构,这篇文章主要给大家介绍了关于JavaScript是如何影响DOM树构建的相关资料,需要的朋友可以参考下
    2021-08-08
  • 网页中JS函数自动执行常用三种方法

    网页中JS函数自动执行常用三种方法

    这篇文章主要为大家详细介绍了网页中JS函数自动执行常用三种方法,感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论