如何在Vite中为懒加载JS引入的CSS动态禁用PurgeCSS？

针对你这种在懒加载分片JS里直接引入第三方CSS的场景，有几种实用的方法可以跳过PurgeCSS的处理：

方法一：在PurgeCSS配置中直接指定保留目标文件或类名 #

如果用的是vite-plugin-purgecss，可以在Vite配置文件（vite.config.js）里通过safelist配置直接把目标CSS文件加入白名单，或者匹配第三方库的类名规则：

方式1：指定完整文件路径 #

import purgecss from 'vite-plugin-purgecss'

export default {
  plugins: [
    purgecss({
      safelist: {
        files: ['fancybox/dist/scss/jquery.fancybox.scss']
      }
    })
  ]
}

方式2：匹配类名正则（适合知道类名前缀的情况） #

Fancybox的类名基本都以fancybox-开头，直接用正则匹配所有相关类：

purgecss({
  safelist: {
    pattern: /^fancybox-/
  }
})

方法二：通过本地中转样式文件添加忽略注释 #

创建一个本地样式文件（比如fancybox-styles.scss），在文件开头加上/* purgecss ignore file */注释，再导入第三方CSS，最后在JS里引入这个本地文件：

1. 新建fancybox-styles.scss：

/* purgecss ignore file */
@import 'fancybox/dist/scss/jquery.fancybox.scss';

2. 修改JS文件的导入语句：

// 替换原来的第三方CSS导入
import './fancybox-styles.scss'
import 'fancybox/dist/js/jquery.fancybox'

// 其他代码不变

这种方法的好处是不用修改全局PurgeCSS配置，只针对单个依赖做处理，更灵活。

内容的提问来源于stack exchange，提问作者Kevin