Webpack5之CSS3自动补齐前缀

文章目录

背景
使用步骤

背景

首先看文章标题，我们带着一个疑问，为什么CSS3需要带前缀呢？

浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。各大浏览器的标准没有完全统一，导致各个浏览器地兼容不一样，到现在，依然还有很多属性需要带前缀。

前缀	浏览器	内核
-ms-	IE浏览器	Trident内核
-moz-	Firefox	Gecko内核
-o-	Opera	Presto内核
-webkit-	Chrome和Safari	Webkit内核

浏览器地兼容性问题，可以在Can I use，关网上查询，同时下面介绍的插件也是根据Can I use来自动设置解决方案。下面是网站截图：

使用步骤

首先我们来介绍两个工具：

postcss

利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。

CSS 模块能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。

通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。
autoprefixer

它是postcss中的一个插件。见名知意，它的作用主要就说用来补齐css前缀

插件安装
```
npm i -D postcss-loader autoprefixer
```

配置webpack.config.js

'use strict';const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const autoprefixer = require('autoprefixer');module.exports = {entry: {app: './src/index.js',search: './src/search.js'},                //打包入口文件(如果是单个入口就是字符串，如果是多个入口就需要配置成对象)output: {                               //打包输出文件path: path.join(__dirname, 'dist'),filename: '[name]_[chunkhash:8].js'},// watch: true,mode: 'production',                      //环境module: {rules: [{test: /\.css$/,use: [// 'style-loader',MiniCssExtractPlugin.loader,'css-loader',]},{test: /\.less$/,use: [// 'style-loader',MiniCssExtractPlugin.loader,'css-loader','less-loader',{loader: "postcss-loader",options: {postcssOptions: {plugins: [autoprefixer({overrideBrowserslist: ['last 10 Chrome versions','last 5 Firefox versions','Safari >= 6','ie> 8']})]}}}]}]}}

当前插件版本信息：

Webpack:5.69.1

Postcss-loader:10.2.0

Autoprefixer:10.4.2

less-loader:10.2.0

Webpack5之CSS3自动补齐前缀相关推荐

ios-晋级之路 CocoaPods引用第三方库不import不自动补齐
对于CocoaPods不自动补齐解决方案如下选择工程的 Target -> Build Settings 菜单,找到\"User Header Search Paths\" ...
mysql 自动补齐表名,列名方法, 重启mysql方法
1.mysql自动补齐方法方法一.修改my.cnf vi /etc/my.cnf [mysql] auto-rehash #添加auto-rehash 注:修改 #no-auto-r ...
Geany 代码自动补齐功能设置
很多人用 geany 感觉不方便,有一部分就是相比于 pycham 的自动补齐功能不好使. 现在给大家看下自动补齐功能设置方法,设置完后用起来非常方便哦. Geany 代码自动补全设置: 默认出现自动 ...
Jupyter 编写python代码实现代码自动补齐功能设置实例演示
Jupyter 代码自动补齐功能第一章:启用代码自动补齐功能 ① 安装工具包 ② 重启 Jupyter 服务 ③ 功能设置 ④ 效果展示 ⑤ cmd 安装工具包详细过程展示第一章:启用代码自动补齐 ...
sql server 语句自动补齐
sql2008 sql语句自动补齐功能 sql2008的命令自动补齐功能在哪设置包括查询的表明自动补齐不想用插件这个好像2008自带的有这个功能难道我装的版本不对楼主说的是自动联想功能吧,任 ...
linux快捷命令补齐,Linux Shell简介——自动补齐／命令行的历史记录／编辑命令行／可用的 Shell 快捷方式.doc...
Linux Shell简介--自动补齐/命令行的历史记录/编辑命令行/可用的 Shell 快捷方式 Unix (及后继者 Linux)在命令行下面诞生,因此,Unix 中的命令行有许多非常实用的功能. ...
输入框限制只能输入数字，正数、负数、0，最多两位小数；数字输入框可以输入负数，并最多保留两位小数；el-number-input去掉四舍五入和自动补齐小数；
场景: –要求1:输入框只能输入数字,可以使正数.负数.0,小数点最多保留两位. –要求2:不需要自动补齐小数点,也不需要自动四舍五入. element-ui的数字输入框el-input-number ...
【转】Emacs -- 自动补齐
1. Emacs 自带的hippie-expand (参考的是王垠的) hippie-expand是 Emacs 自带的功能, 把M-/ 绑定到 hippie-expand,在.emacs文件中加入 ...
editplus public class自动补齐大括号问题破解
这样你再打public class就不会自动补齐大括号了

Webpack5之CSS3自动补齐前缀

文章目录

背景

使用步骤

Webpack5之CSS3自动补齐前缀相关推荐

最新文章

热门文章