配置postCSS自动添加css的兼容前缀

前言
在这里我使用VScode为编辑器

html文件中

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="/button.js"></script>
</head>
<body><input type="text" placeholder="css样式兼容问题">
</body>
</html>

css文件中

::placeholder{color:red;
}

执行打包 npm run start 命令后

360极速浏览器效果

IE浏览器效果

最终结果很显然，IE中样式没有任何变化

应用场景：当我们在360极速浏览器中定义了文本的样式，在IE浏览器中不会显示定义的文本样式，这个时候就需要在样式中加上浏览器前缀了

运行 npm i postcss-loader autoprefixer -D命令
项目根目录中创建 postcss 的配置文件postcss.config.js,并初始化如下配置:

postcss.config.js代码如下：

const autoprefixer = require('autoprefixer');
module.exports = {plugins:[autoprefixer]
}

在 webpack.config.js 的module -> rules数组中，修改css的loader 规则如下:
在css配置中额外增加一个 postcss-loader

//所有第三方文件模块的匹配规则module:{rules:[//配置css{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},//配置less{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置scss{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},]    }

实现vscode终端 npm run start 命令

360极速浏览器效果

IE浏览器效果

这样就完成css样式的兼容配置操作了

webpack中loader加载器配置postCss自动添加CSS兼容前缀相关推荐

webpack中loader加载器(打包非js模块)
通过loader打包非js模块我这儿用VScode为编辑器在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非. js后缀名结尾的模块,webpack 默认处理不了, ...
webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
需要了解的常用Webpack插件配置-loader加载器
我们都知道通过安装和配置第三方插件,可以使我们的webpack拓展更多的功能,虽然之后开发项目不需要我们自己去进行这些繁琐的配置,但是我们需要知道这些,在必要时我们可以去做出修改比如我们在初识web ...
034_webpack中的加载器
1. 通过loader打包非js模块 1.1. 在实际开发中, webpack默认只能打包处理以.js后缀名结尾的模块, 其它非.js后缀名结尾的模块, webpack默认处理不了, 需要调用load ...
Webpack基础之加载器
加载器(Loaders): loader 是对应用程序中资源文件进行转换.它们是(运行在 Node.js 中的)函数,可以将资源文件作为参数的来源,然后返回新的资源文件示例: 例如,你可以使用 lo ...
qml中loader加载页面会闪屏_Qml动态语言切换
此方法需要在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现重要的事情说三遍首先在工程文件.pro中加入TRANSLATIONS = zh_CN.ts ...
javascript中动态加载js、vbs脚本或者css样式表
目录:DynamicLoad类简介.属性.方法.事件.示例.下载. DynamicLoad类简介本文将为您介绍一个在javascript中可以动态加载js.vbs脚本和css样式表的DynamicL ...
在计算机系统中使用加载器,在个人计算机系统中从软盘加载基本输入/输出系统的设备和方法...
主权项: 一种从通常接有硬文件的个人计算机系统的软盘驱动器含有的\r\r\r\r\n软盘介质中加载BIOS的设备,该个人计算机系统具有系统\r\r\r\r\n处理器.只读存储器.随机存取存储器和软盘驱 ...

webpack中loader加载器配置postCss自动添加CSS兼容前缀

配置postCSS自动添加css的兼容前缀

webpack中loader加载器配置postCss自动添加CSS兼容前缀相关推荐

最新文章

热门文章