参考文章
官方文档:https://webpack.docschina.org/loaders/postcss-loader/
autoprefixer:https://autoprefixer.github.io/
caniuse:https://caniuse.com/
下载库
sh
yarn add -D postcss-loader postcss因为下面的文章会使用到 postcss-preset-env
因此我们还需要下载这个库
sh
yarn add -D postcss-preset-env⚠️
postcss-preset-env包含autoprefixer,因此如果你已经使用了 preset 就无需单独添加它了。更多 信息
配置代码
webpack.config.js
javascript
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
// 其他选项
},
],
],
},
},
},
],
},
],
},
};按照上述文章配置的话,默认会按照预设去实现CSS兼容性处理,如果需要更加精细化的配置,可以去使用 browserslistrc 配置具体的浏览器版本。