webpack 5 默认不处理css文件，必须配置css-loader、style-loader（开发）或minicssextractplugin.loader（生产）等loader，否则样式不会进入bundle；loader顺序不可颠倒，且需确保url()解析、~路径映射等细节正确。
Webpack 5 默认不处理 CSS 文件，不是路径写错而是 loader 缺失
Webpack 5 完全不会解析 .css 或 .scss 文件——哪怕你写了 import 'bootstrap/dist/css/bootstrap.min.css'，只要没配 loader，样式就根本不会进 bundle，浏览器里也看不到任何报错，只表现为“样式全没了”。这不是路径问题，是构建链断在了第一步。
必须装这五个依赖：css-loader、style-loader、sass-loader、sass（编译器）、mini-css-extract-plugin。其中 mini-css-extract-plugin 是生产环境必需的，否则 CSS 会打进 JS bundle，阻塞首屏渲染。
-
style-loader用于开发时把 CSS 注入<style></style>标签；生产环境必须换成MiniCssExtractPlugin.loader - loader 顺序不能颠倒：
MiniCssExtractPlugin.loader→css-loader→sass-loader - 如果用 SCSS 自定义主题，
@import '~bootstrap/scss/bootstrap'中的~前缀默认不生效，需在sass-loader的options里显式开启webpackImporter: true
SCSS 中 @import '~bootstrap/...' 报 Can't resolve 的真实原因
SCSS 编译器本身不扫描 node_modules，~ 不是 Sass 语法，而是 sass-loader 提供的快捷前缀，但它的行为受两个配置控制：是否启用 webpackImporter，以及 includePaths 是否包含 node_modules 目录。
常见错误现象：ERROR in ./src/App.scss Module build failed: Can't resolve '~bootstrap/scss/functions'。这不是包没装，而是 sass-loader 没把 ~ 映射到 node_modules。
- 必须在
sass-loader的options中加webpackImporter: true - 同时加
includePaths: [path.resolve(__dirname, 'node_modules')]，否则内部@import './mixins'也会失败 -
~后路径必须严格匹配node_modules实际结构，比如~bootstrap/scss/functions对应的是node_modules/bootstrap/scss/_functions.scss
生产环境 CSS 里字体、图片 404，和 Bootstrap 无关
Bootstrap 的 SCSS 文件里有 url('./fonts/bootstrap-icons.woff2') 这类相对路径引用，Webpack 默认只处理你项目里写的 import 和 require，不会递归解析第三方库 SCSS 内部的 url()。结果就是 CSS 打包成功，但字体文件 404。
这不是路径写错了，是 loader 链没覆盖到第三方依赖的资源引用。
- 确保
css-loader开启url: true（默认开启，但自定义配置时可能关掉） - 字体、图片等静态资源需有对应 loader，如
file-loader或 Webpack 5+ 的asset模块类型 - 若用
mini-css-extract-plugin，注意它生成的 CSS 文件与资源的相对位置已变，publicPath可能需设为'./'或'../'来对齐
为什么 import 'bootstrap' 后 CSS 没效果，但 JS 功能正常？
因为 bootstrap/dist/js/bootstrap.bundle.min.js 只含 JS，不含任何 CSS。Bootstrap 5 彻底分离了样式与脚本。你看到轮播图能动、下拉菜单能展开，只是 JS 在跑，但按钮圆角、栅格间距、颜色全是浏览器默认值——CSS 根本没加载进来。
最简解法就是在入口 JS 顶部加一行：import 'bootstrap/dist/css/bootstrap.min.css'。别用 public/index.html 的 <link>，否则 Webpack 无法处理哈希、CDN 替换、public 资源拷贝时机等问题。
- 如果用了 SCSS 版本，必须显式
@import '~bootstrap/scss/bootstrap'，且所有变量覆盖（如$primary）必须写在这行@import之前 - Vite 用户注意：
~在 Vite 中无效，得用resolve.alias配@modules，再配合css.preprocessorOptions.sass.additionalData注入变量 - 别在 SCSS 里写
@import 'bootstrap'，Bootstrap 没提供这个入口文件，会直接报错
~ 没开开关、url() 没被接管、CSS 和 JS 分开引入却只引了 JS——这些点都藏在配置深处，不报红但样式就静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
