V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
renhou
V2EX  ›  问与答

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

  •  
  •   renhou · 2022-07-04 13:43:11 +08:00 · 541 次点击
    这是一个创建于 634 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前提

    • 使用 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 无法被检测到
    2 条回复    2022-07-04 18:03:01 +08:00
    gouflv
        1
    gouflv  
       2022-07-04 16:46:31 +08:00 via iPhone   ❤️ 1
    主题方案可以试试 css var()
    renhou
        2
    renhou  
    OP
       2022-07-04 18:03:01 +08:00
    @gouflv
    谢老哥,研究了一下午,基本就是用 css 变量和改 vite 的 rollup 选项做到了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5356 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 103ms · UTC 08:04 · PVG 16:04 · LAX 01:04 · JFK 04:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.