Skip to content

参考文章

官方文档: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 配置具体的浏览器版本。