CSSNano实战指南：从入门到精通的压缩利器使用心得

cssnano压缩CSS文件后样式乱了，我怎么解决的

最近在搞一个项目，用了cssnano来压缩CSS文件，结果压缩完发现页面样式全乱了。这里我踩了个坑，折腾了半天才发现问题所在。

排查过程

一开始以为是自己的CSS写得有问题，但仔细检查了好几遍都没发现问题。后来试了下不压缩直接跑，一切正常。所以问题肯定出在cssnano上了。

我在网上搜了一圈，看到有人提到可能是cssnano的某些插件配置有问题。于是我就开始一个个调试cssnano的插件。先是禁用了discardComments，再是discardUnused，结果还是不行。最后我试了一下mergeLonghand，发现去掉这个插件后，样式就正常了。

折腾了半天发现，原来是mergeLonghand插件把我的一些长手属性合并成了短手属性，导致浏览器解析出现了问题。比如我原本的border-top-width: 1px; border-bottom-width: 1px;被合并成了border-width: 1px;，这样上下边框都变成了1px，而不是只有上边和下边有边框。

最终解决方案

找到问题后，解决起来就简单多了。只需要在cssnano的配置中禁用mergeLonghand插件就好了。下面是完整的配置代码：

const cssnano = require('cssnano');
const postcss = require('postcss');

const config = {
  plugins: [
    'cssnano',
    {
      preset: [
        'default',
        {
          discardComments: { removeAll: true },
          discardDuplicates: true,
          discardEmpty: true,
          minifyFontValues: true,
          minifyGradients: true,
          minifyParams: true,
          minifySelectors: true,
          normalizePosition: true,
          normalizeTimingFunctions: true,
          reduceIdents: true,
          reduceInitial: true,
          reduceTransforms: true,
          svgo: true,
          zindex: true,
          mergeLonghand: false, // 关键点在这儿
        },
      ],
    },
  ],
};

postcss(config.plugins).process(css, { from: 'src/app.css', to: 'dist/app.min.css' }).then(result => {
  fs.writeFileSync('dist/app.min.css', result.css);
});

在这个配置中，mergeLonghand被设置为false，这样就不会合并长手属性了。改完后重新运行一遍，果然样式恢复正常了。

技术细节和原理

其实mergeLonghand插件的作用是将长手属性合并成短手属性，以此来减少CSS文件的大小。举个例子，background-position: 0 0;会被合并成background-position: 0 0;。这在大多数情况下是没问题的，但是当你的样式比较复杂时，可能会出现一些意想不到的问题。

比如我的项目中有一些复杂的布局，需要精确控制各个边框的宽度。如果这些属性被合并了，就会导致布局出现问题。所以，在使用cssnano的时候，一定要根据项目的实际情况来选择合适的插件配置。

另外，mergeLonghand插件还有一个参数shorthandCompacting，可以控制是否启用简写属性的合并。默认是true，如果你希望保留长手属性，可以将其设置为false。不过在我这个例子中，直接禁用整个插件是最简单的方法。

总结一下

以上是我踩坑后的总结，希望对你有帮助。如果你有更好的方案欢迎评论区交流。这个技巧的拓展用法还有很多，后续我会继续分享这类博客。