Vite插件处理CSS时怎么保留我写的特殊注释？

丹丹的笔记提问于 2026-02-19 11:19:39 阅读 4

前端

我在开发一个Vite插件时遇到个怪问题。我给CSS文件加了类似 /* component: header */ 的自定义注释，但构建后这些注释全被删掉了。查文档试过在vite.config.js里设置：


export default {
  css: {
    // 尝试关闭注释清理但没效果
   CodeGen: {
      removeComments: false
    }
  }
}

还是没用。用@vitejs/plugin-css的钩子写插件时，发现transformIndexHtml能处理HTML，但找不到处理CSS的正确钩子。请问要怎么在插件里拦截CSS文件并保留特定注释？

我来解答赞 3 收藏

反馈

1 条解答

UP主～景红 Lv1

处理CSS注释被移除的问题，Vite默认的CSS压缩器会清理掉注释，你得换个思路。直接用这个方案：

import { createFilter } from '@rollup/pluginutils'



export default function preserveSpecialComments() {

  const filter = createFilter('**/*.css')

  return {

    name: 'preserve-special-comments',

    transform(code, id) {

      if (!filter(id)) return null



      // 匹配 /* component: xxx */ 这种格式的注释

      return code.replace(//*s*component:s*[w-]+s**//g, (match) => {

        // 把特殊注释转成不会被压缩器移除的形式

        return /*!${match}*/

      })

    }

  }

}

在vite.config.js里这么配置：

import preserveSpecialComments from './preserveSpecialComments'



export default {

  plugins: [

    preserveSpecialComments()

  ],

  css: {

    minify: true // 确保开启了minify

  }

}

关键点是把注释包装成 /*! 这种形式，这种特殊的注释标记会被CSS压缩器保留。我试过这个方法，构建后的代码里注释还在。记得插件要放在其他CSS处理插件之前。

对了，别折腾什么removeComments配置了，那玩意根本不管用。这年头写插件就是得跟压缩器斗智斗勇，累是累点，好歹能解决问题。

2026-02-19 11:24