Webpack 意外移除CSS -webkit-box-orient规则的问题排查与解决

*-webkit-box-orient: vertical*是Webkit内核下实现多行文本截断的必备私有规则，你碰到的规则被删的情况，根本不是Webpack直接处理导致的，是两个CSS处理链路的默认清理逻辑共同作用的结果：

• PostCSS链路的autoprefixer会把该规则判定为「已被标准属性替代的冗余旧前缀」，主动从样式表中移除
• 生产构建开启的CSS压缩（由Webpack内置压缩+css-loader默认集成的cssnano完成），会进一步清理它判定为无意义的样式规则

你之前添加的/* stylelint-disable */仅能跳过stylelint的代码校验，管不到PostCSS和压缩器的删除逻辑，所以开发环境规则保留、生产环境被删；就连写在HTML标签上的内联样式被删，也是因为html-loader解析HTML时同样会经过CSS清理链路，把这条私有规则当成冗余值清掉了。

按改动范围从小到大排序，可直接选用：

方案1：给autoprefixer加局部跳过标记（改动最小） #

利用autoprefixer原生支持的注释标记，单独跳过对这条规则的清理，不需要修改全局配置：

.accordeon:not(.accordeon--expanded) .accordeon__intro {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  height: 2.7em;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

这个标记的生效范围覆盖PostCSS处理全链路，比stylelint注释的作用更强，能直接阻止autoprefixer对这段样式的清理。

方案2：调整autoprefixer全局配置 #

如果项目里多处需要保留这类Webkit私有规则，可以直接修改postcss.config.js，关闭autoprefixer的冗余规则删除逻辑：

module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: ['last 3 version'],
      // 禁止autoprefixer主动删除已存在的私有前缀规则
      remove: false
    })
  ]
}

注意：这个配置不会影响autoprefixer自动补全标准前缀的能力，只是不会主动删除代码里已经写好的私有规则，不会带来其他兼容性问题。

方案3：调整CSS压缩规则 #

针对生产构建阶段的cssnano压缩删除逻辑，修改Webpack里的css-loader配置，关闭无用规则丢弃的逻辑：

// webpack.config.js 中对应CSS处理的loader配置部分
{
  test: /\.(css|scss)$/,
  loader: ExtractTextPlugin.extract({
    fallbackLoader: "style-loader",
    loader: [
      {
        loader: "css-loader",
        options: {
          minimize: {
            // 禁止cssnano丢弃它判定为"未使用"的样式规则
            discardUnused: false
          }
        }
      },
      "postcss-loader",
      "sass-loader"
    ]
  }),
}

内联样式被删的适配 #

如果需要在HTML标签上写内联的-webkit-box-orient规则，需要给html-loader加配置，关闭内联样式的压缩逻辑：

{
  test: /\.html$/,
  loader: "html-loader",
  options: {
    minimize: {
      // 不对内联style属性做CSS压缩和清理
      minifyCSS: false
    }
  }
}

内容的提问来源于stack exchange，提问作者Toni Michel Caubet