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

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

前端

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


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

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

我来解答赞 11 收藏

反馈

2 条解答

ლ红爱 Lv1

你那个配置写错了，而且CSS注释在生产构建时是被esbuild或lightningcss干掉的。最简单的方法是把注释改成 /*! component: header */，感叹号开头的注释压缩器会保留，差不多就行。

如果非要走插件，用 transform 钩子拦截 .css 后缀的文件，记得加 enforce: 'pre' 不然拿到的是处理后的：

export default function myPlugin() {

  return {

    name: 'preserve-comments',

    enforce: 'pre',

    transform(code, id) {

      if (id.endsWith('.css')) {

        // 在这里保存你的注释或者处理逻辑

        return code

      }

    }

  }

}

或者直接关掉CSS压缩的注释清理：

export default {

  build: {

    cssMinify: {

      removeComments: false

    }

  }

}

2026-03-02 22:03

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