webpack4.x中使用postcss-loader、autoprefixer给CSS属性自动添加前缀

由于市面上存在几大主流浏览器，当我们在编写CSS相关属性的时候，需要添加兼容各浏览器的前缀，但是这样非常耗时、影响工作效率。

比如编写：

1 .searchBox{
2     display: flex;
3 }

但我们想要的是这种：

1 .searchBox{
2     display: -webkit-box;
3     display: -webkit-flex;
4     display: -moz-box;
5     display: -ms-flexbox;
6     display: flex;
7 }

那么，接下来有办法解决该问题。

安装

1 npm install node-sass sass-loader css-loader style-loader postcss-loader autoprefixer -D

配置 webpack.config.js

 1 module.exports = [
 2     module: {
 3         rules: [
 4              {
 5                   test: /\.(scss|css)$/,    //打包css、sass文件
 6                   use:[{
 7                             loader:'css-loader',
 8                             options: { minimize: false }
 9                        },
10                        {
11                             loader:'sass-loader'
12                        },
13                        'postcss-loader'
14                    ]
15               }
16          ]
17     }
18 ]

创建 postcss.config.js文件

该文件与webpack.config.js在同一目录下，配置如下：

1 module.exports = {
2      plugins : [
3          require('autoprefixer')({
4              browsers : ['last 100 versions']      //必须设置支持的浏览器才会自动添加添加浏览器兼容
5          })
6      ]
7  };

好了，基本配置就是这些，之后打包css的时候会自动添加前缀。

如果文章中存在错误的地方，麻烦请大家在评论中指正，以免误人子弟，谢谢！

转载于:https://www.cnblogs.com/zhaoyongblog/p/10374700.html

webpack4.x中使用postcss-loader、autoprefixer给CSS属性自动添加前缀相关推荐

微信小游戏子域中请求微信头像，cocos create会自动添加前缀的问题
在微信小游戏中获取到了头像url之后,打算使用cc.loader.load进行加载但是请求出去的时候,会在url前面添加子域目录: 像这样 https://wx.qlogo.cn/mmopen/vi ...
webpack4.x中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容
当前我们在写css样式的时候总是要处理浏览器兼容问题,那就是加前缀问题,可是我们在开发的时候比如: 直接写个: .className{display: flex; } 想变成下面这种的 .classN ...
使用webpack4 兼容ios8 自动添加前缀
最近写了移动端的项目,没有考虑到要兼容ios8.flex布局和css3的transform等没有起到作用.Safari是用webkit内核,需要增加一些前缀,才能起到作用.用webpack构建css样 ...
css中在图片上加透明,css 给图片添加滤镜效果，透明层毛玻璃效果
我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果原图添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...
vue中使用window.open会在url前自动添加本地服务器的地址bug修复
不能写成www.baidu.com 需要写成https://www.baidu.com 转载于:https://www.cnblogs.com/yuanxinru321/p/10131508.html
配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
autoprefixer的应用实现保存代码自动添加css前缀
基于autoprefixer和postcss的jsAPI实现的保存自动添加css前缀的工具插件 1. 在开发node服务端项目时,使用不到webpack等打包构建工具,又想要添加css的前缀,可以使用 ...
wpf 虚拟打印时在文件另存为框中如何实现自动添加文件名
最近项目中需要实现在虚拟打印时,自动添加文件名找了好多主要有两种方案一:隐藏print操作中的自带的SaveFileDialog,自己创建一个,通过设置FileName实现,但是这种实现方式是在低 ...
webpack中loader加载器配置postCss自动添加CSS兼容前缀
配置postCSS自动添加css的兼容前缀前言在这里我使用VScode为编辑器 html文件中 <!DOCTYPE html> <html lang="en" ...

webpack4.x中使用postcss-loader、autoprefixer给CSS属性自动添加前缀

安装

配置 webpack.config.js

创建 postcss.config.js文件

webpack4.x中使用postcss-loader、autoprefixer给CSS属性自动添加前缀相关推荐

最新文章

热门文章