如何在Astro中摇树剔除未使用的Bootstrap SCSS类？

1. 严格按需导入Bootstrap SCSS模块 #

不要直接导入完整的bootstrap.scss，而是拆分导入核心工具和你实际用到的组件，从源头减少冗余代码：

// 按顺序导入Bootstrap核心工具（必须遵循：functions → variables → mixins）
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 只导入你用到的组件，比如：
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/modal";
// 其他组件按需添加...

注意：如果要自定义Bootstrap变量，需把变量定义放在导入functions之前，确保覆盖默认值。

2. 用PurgeCSS自动清理未使用的类 #

借助PurgeCSS扫描项目文件，自动剔除未被引用的CSS类，仅在生产环境启用（避免影响开发调试）：

步骤1：安装依赖 #

npm install purgecss @fullhuman/postcss-purgecss autoprefixer --save-dev

步骤2：配置PostCSS #

在项目根目录创建postcss.config.cjs文件：

module.exports = {
  plugins: [
    require('autoprefixer'),
    // 仅生产环境启用PurgeCSS
    process.env.NODE_ENV === 'production' ? require('@fullhuman/postcss-purgecss')({
      // 扫描所有可能引用CSS类的文件
      content: [
        './src/**/*.astro',
        './src/**/*.js',
        './src/**/*.ts',
        './public/**/*.html'
      ],
      // 安全列表：保留动态生成或特殊场景的类，避免误删
      safelist: {
        standard: [/^btn-/, /^col-/, /^card-/, /^modal-/], // 你用到的组件前缀
        deep: [/show$/, /fade$/], // 动态状态类（如modal-show）
        greedy: []
      },
      // 提取CSS选择器的规则
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    }) : false
  ]
}

关键：safelist必须根据实际使用情况配置，比如JS动态添加的类、响应式类都要加入，防止功能失效。

3. 通过变量关闭Bootstrap未使用的全局功能 #

在导入Bootstrap核心文件前，覆盖变量关闭不需要的功能，减少冗余CSS生成：

// 自定义变量，关闭不需要的功能
$primary: #2563eb;
$enable-rounded: false; // 不需要圆角则关闭，减少相关类
$enable-shadows: false;
$enable-gradients: false;
$enable-transitions: false; // 不需要过渡动画则关闭

// 再导入Bootstrap核心工具和组件
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 按需导入组件...

4. 验证优化效果 #

• 执行生产构建：npm run build
• 查看dist/assets下的CSS文件大小，对比优化前的体积
• 用浏览器开发者工具的Coverage面板，检查未使用CSS的比例，确认冗余代码被有效剔除
• 测试所有页面功能，确保没有因为类被删除导致的样式或功能异常

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