PostCSS 介绍

PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。

• 可以自动为 CSS 规则添加前缀；
• 将最新的 CSS 语法转换成大多数浏览器都能理解的语法；
• css-modules 解决全局命名冲突问题。

postcss-loader

postcss-loader 使用 PostCSS 处理 CSS 的 loader。

依赖的安装

npm install --save-dev postcss-loader postcss postcss-preset-env

配置

修改通用环境配置文件 webpack.commom.js：

const paths = require('./paths');
module.exports = {
  module: {
    rules: [
      // 一同将css sass  postcss 一起的配置
      {
        test: /\.module\.(scss|sass)$/,
        include: paths.appSrc,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          {
            loader: 'css-loader',
            options: {
              // Enable CSS Modules features
              modules: true,
              importLoaders: 2,
              // 0 => no loaders (default);
              // 1 => postcss-loader;
              // 2 => postcss-loader, sass-loader
            },
          },
          // 将 PostCSS 编译成 CSS
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    // postcss-preset-env 包含 autoprefixer
                    'postcss-preset-env',
                  ],
                ],
              },
            },
          },
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ],
  },
}

为提升构建效率，为 loader 指定 include，通过使用 include 字段，仅将 loader 应用在实际需要将其转换的模块。