使用Webpack压缩CSS时能否忽略特定关键字？规避模板语法验证报错

要实现仅压缩CSS文件、忽略模板关键字（如<#、if）且不进行语法校验的需求，可以通过以下两种Loader组合实现：

方案一：PostCSS + cssnano + postcss-safe-parser #

这个方案用postcss-safe-parser兼容非标准CSS语法，再通过cssnano完成压缩，既保留模板代码又能正常构建。

1. 安装依赖：

npm install --save-dev postcss-loader cssnano postcss-safe-parser style-loader

2. Webpack配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader', // 若需提取独立CSS文件，替换为MiniCssExtractPlugin.loader
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: false // 无需CSS Modules时设为false
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                parser: 'postcss-safe-parser', // 跳过语法校验，兼容模板代码
                plugins: [
                  require('cssnano')({
                    preset: 'default',
                    options: {
                      discardComments: { removeAll: true } // 可选：移除所有注释
                    }
                  })
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

方案二：clean-css-loader #

clean-css-loader支持直接忽略语法错误，仅执行压缩操作，配置更简洁。

1. 安装依赖：

npm install --save-dev clean-css-loader style-loader

2. Webpack配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader', // 替换为MiniCssExtractPlugin.loader可提取独立文件
          {
            loader: 'clean-css-loader',
            options: {
              ignoreErrors: true, // 忽略语法错误，保留模板代码
              skipWarnings: true, // 跳过语法警告
              // 自定义压缩规则
              level: {
                1: {
                  all: true,
                  removeEmpty: true
                }
              }
            }
          }
        ]
      }
    ]
  }
};

两种方案都能让Webpack忽略你的模板关键字，完成CSS压缩且不报错。如果需要提取独立的CSS文件，记得搭配mini-css-extract-plugin使用。

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