如何配置Bootstrap/Webpack实现类TailwindCSS的按需CSS编译？

完全可以通过工具配置实现类似Tailwind的按需编译效果，下面是两种实用方案：

方案1：Bootstrap模块化手动导入（精准可控） #

Bootstrap 5及以上版本本身采用模块化结构，你可以直接在SCSS入口文件中只导入项目实际用到的组件，而非完整库：

// 先导入Bootstrap核心依赖（函数、变量、混合宏）
@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/cards"; // 卡片组件
@import "../node_modules/bootstrap/scss/utilities"; // 工具类

配合Webpack的sass-loader、css-loader和mini-css-extract-plugin（或style-loader），就能只编译打包你选中的组件样式，彻底避免冗余。

方案2：用PurgeCSS自动清理未使用样式（快速适配旧项目） #

如果你的项目已经引入了完整Bootstrap，不想手动拆分组件，可以用PurgeCSS自动扫描HTML/JSX等标记文件，识别用到的Bootstrap类，移除未使用的CSS：

1. 安装依赖：

npm install purgecss-webpack-plugin css-loader postcss-loader sass-loader bootstrap glob --save-dev

2. 修改Webpack配置，添加PurgeCSS插件：

const path = require('path');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].css' }),
    new PurgeCSSPlugin({
      // 扫描所有包含Bootstrap类的源代码文件
      paths: glob.sync(`${path.resolve(__dirname, 'src')}/**/*`, { nodir: true }),
      // 保护动态生成的类（比如JS中添加的`btn-primary`）不被误删
      safelist: {
        standard: [/^btn-/, /^card-/, /^col-/] // 根据你的动态类前缀调整
      }
    })
  ]
};

3. 继续导入完整Bootstrap SCSS：

@import "../node_modules/bootstrap/scss/bootstrap";

编译时PurgeCSS会自动剔除未被标记引用的样式，达到按需打包的效果。

关键提示 #

• 动态生成的类（如通过JS拼接的bg-${color}）必须加入PurgeCSS的safelist，否则会被当作未使用样式删除。
• 模块化导入的编译速度比PurgeCSS更快，也更精准，适合新项目或重构项目；PurgeCSS适合快速优化已有旧项目。

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