Webpack5 系列（二）：静态资源的处理3

3. postcss-loader

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

postcss 仓库：github.com/postcss/pos…

autoprefixer：github.com/postcss/aut…

postcss-preset-env：github.com/csstools/po…

a) 安装

安装：

shell

复制代码

npm install --save-dev postcss-loader postcss

webpack.config.js

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.s?css$/i,
        use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"],
      },
    ],
  },
};

注意，postcss-loader 要放在最后。

b) 配置

Autoprefixer

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

PostCSS Preset Env

PostCSS Preset Env lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments.

PostCSS SCSS Syntax

A SCSS parser for PostCSS.

This module does not compile SCSS. It simply parses mixins as custom at-rules & variables as properties, so that PostCSS plugins can then transform SCSS source code alongside CSS.

插件需要安装一下：

npm install postcss-preset-env autoprefixer postcss-scss --save-dev

在根目录下，新建：postcss.config.js

module.exports = {
  syntax: "postcss-scss",
  plugins: [require("autoprefixer"), "postcss-preset-env"],
};

webpack.config.js 不需要修改。