本技能说明如何在 Webpack 项目中引入并打包 Bootstrap 6 的 CSS 与 JavaScript，包括处理 Sass 所需的各类 loader。使用前提是已安装 Node.js 并熟悉终端操作。
用途：在 Webpack 构建流程中集成 Bootstrap 6，将 Sass 源码编译为 CSS，并打包 Bootstrap 的 JS 组件。
主要流程：第一步初始化 npm 并安装依赖；第二步创建项目目录结构；第三步配置 Webpack（含 boilerplate 与 dev server）；第四步设置 loader 并导入 Bootstrap；第五步验证；第六步为可选的生产环境优化。
依赖安装：Webpack 及工具链使用 webpack、webpack-cli、webpack-dev-server、html-webpack-plugin；Bootstrap 及其可选 peer 依赖为 bootstrap@6.0.0-alpha.1、@floating-ui/dom、vanilla-calendar-pro（不使用菜单、弹出框或工具提示时可省略 @floating-ui/dom，不使用日期选择器时可省略 vanilla-calendar-pro）；打包 CSS 需 autoprefixer、css-loader、postcss-loader、sass、sass-loader、style-loader。
使用方式：在 webpack.config.js 中配置 entry、output、devServer 与 HtmlWebpackPlugin，并添加匹配 .scss$ 的 module.rules loader 链，顺序为 sass-loader 编译、postcss-loader 运行 Autoprefixer、css-loader 解析导入、style-loader 注入 CSS。在 src/scss/styles.scss 中使用 @use "bootstrap/scss/bootstrap";（不要用 @import）引入 Bootstrap 的 Sass 源码。在 src/js/main.js 中先导入自定义 CSS，再导入 Bootstrap 的 JS，可按需只导入个别插件以减小包体积。运行 npm start 后打开 http://localhost:8080 验证样式与 JS 组件是否正常。
限制：Bootstrap 6 需要支持 oklch() 和 color-mix() 的浏览器。自定义时通过覆盖 Bootstrap 的 CSS token 映射（$root-tokens、$*-tokens）实现；Sass 中 token 名称不带前缀，Bootstrap 的 dist/CDN CSS 通过 PostCSS 添加 --bs- 前缀。生产优化为可选，包括用 mini-css-extract-plugin 提取 CSS、以及为 CSP 阻止 data: 图片时配置 asset-module 规则发出内联 SVG 文件。