Webpack 5是否存在不验证CSS规则仅压缩CSS文件的插件？

如果你把CSS文件当作模板使用（里面包含类似模板变量的编程逻辑），常规的CSS压缩插件（比如默认的cssnano）会因为语法验证失败报错。要实现只压缩文本（去空格、注释等）但不验证CSS规则有效性的需求，可以通过以下两种方案实现：

方案一：用 css-minimizer-webpack-plugin 配合 CleanCSS #

CleanCSS支持配置忽略语法错误、禁用规则重构，适合保留模板逻辑的同时做基础压缩。

1. 先安装依赖：

npm install css-minimizer-webpack-plugin clean-css --save-dev

2. 在webpack配置文件中修改optimization.minimizer：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CleanCSS = require('clean-css');

module.exports = {
  // 其他配置...
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minify: async (data, inputMap) => {
          const minifiedResult = new CleanCSS({
            ignoreErrors: true, // 直接忽略所有CSS语法错误（包括模板占位符）
            compatibility: '*', // 兼容所有非标准语法
            level: {
              1: {
                all: true, // 开启基础压缩：移除空格、换行、注释
                removeEmpty: false, // 避免误删包含模板变量的空规则
              },
              2: {
                restructureRules: false, // 禁止重构CSS规则，防止破坏模板逻辑
              }
            }
          }).minify(data);
          return {
            css: minifiedResult.styles,
            map: minifiedResult.sourceMap || inputMap,
          };
        },
      }),
    ],
  },
};

方案二：用 css-minimizer-webpack-plugin 配合 csso #

csso是另一个轻量的CSS压缩工具，同样支持禁用结构重构和忽略错误，适合对压缩体积要求不极致但需要保留模板逻辑的场景。

1. 安装依赖：

npm install css-minimizer-webpack-plugin csso --save-dev

2. 修改webpack配置：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const csso = require('csso');

module.exports = {
  // 其他配置...
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minify: async (data, inputMap) => {
          const minifiedResult = csso.minify(data, {
            restructure: false, // 完全禁用CSS结构重构，保留原始代码顺序
            ignoreErrors: true, // 忽略语法错误
            forceMediaMerge: false, // 不合并媒体查询，避免破坏模板逻辑
          });
          return {
            css: minifiedResult.css,
            map: inputMap,
          };
        },
      }),
    ],
  },
};

注意事项 #

• 不要使用默认的cssnano压缩器，它会严格校验CSS语法，遇到模板变量这类非标准内容会直接抛出错误。
• 如果你只是需要纯文本层面的压缩（完全不解析CSS），也可以把CSS文件当作资源文件处理，用自定义的文本压缩函数，但上面的方案已经能满足绝大多数模板场景的需求。

内容的提问来源于stack exchange，提问作者Shamim