[vite 难题]黑白两套 css 通过<link>属性切换。打包时如何分别精简并同时 copy 到 dist？

[renhou]

前提

• 使用 vite
• 在 public 文件有 light.css 和 dark.css 两套主题
• 开发时：在 main.ts 引入。生产时：在 index.html 引入
• 生产时修改主题，手动注释掉其中一个的 import ，修改另一个
• mian.ts 还引入一些其他 css
• 通过在 vue 中操作 dom 改变 link 属性来切换主题

需求

• 打包时，想要分别去除两套主题内不用的 css 类，并同时 copy 两个主题到 dist
• mian.ts 引入的其他 css 按照默认输出

尝试

• 打包精简 css 可以通过 postcss 插件，但是问题是只能一个一个清除（因为黑白主题不会同时作用）
• 使用 glup 的 purgecss 插件打包前精简，清除效果很不理想，一些第三方库的 class 无法被检测到

[gouflv]

主题方案可以试试 css var()

[renhou]

@gouflv
谢老哥，研究了一下午，基本就是用 css 变量和改 vite 的 rollup 选项做到了