SCSS中用~引用node_modules资源需开启sass-loader的webpackImporter: true，否则@import失败；还需配置includePaths指向node_modules，并处理第三方库中url()路径及sass-loader版本兼容问题。
SCSS里用~引用node_modules资源失败
Webpack默认不识别~前缀，必须配合sass-loader开启webpackImporter: true。关掉这个选项，@import '~bootstrap/scss/bootstrap'就会退化成原生Sass解析器行为，直接报Can't resolve。
常见错误现象：
ERROR in ./src/App.scss Module build failed: Can't resolve '~bootstrap/scss/bootstrap'- 控制台没报错，但样式完全没生效（
~被当普通字符串忽略）
实操建议：
使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1)，免gas，支持macOS/Linux/Windows。触发词：/r
-
webpackImporter: true必须显式写在sass-loader的options里，不能只靠resolve.alias -
~后路径必须严格对应node_modules内真实结构，比如~@vue/component-compiler-utils不能简写成~@vue - 如果第三方库的SCSS入口不是
index.scss或main.scss，要查清它实际暴露的主文件名（如bulma/bulma.sass）
@import写node_modules绝对路径仍404
Webpack对@import的路径解析依赖includePaths配置。即使你写了@import 'node_modules/bootstrap/scss/bootstrap'，若includePaths没包含node_modules目录，Sass编译器照样找不到。
立即学习“前端免费学习笔记（深入）”；
原因很直接：Sass本身不自动扫描node_modules，它只认includePaths里列出的目录。
实操建议：
- 在
sass-loader的options中加includePaths: [path.resolve(__dirname, 'node_modules')] - 多个第三方库混用时（如Bootstrap + Normalize），
includePaths可传数组，避免重复写~ - Vite用户注意：
~在Vite中不生效，必须用alias配/@modules/并配合css.preprocessorOptions.sass.additionalData
第三方CSS库的@import和url()路径不一致
第三方库内部的url('./fonts/xxx.woff')会以该SCSS文件自身位置为基准解析，但Webpack默认不处理第三方库里的url()——导致字体、图片404。这不是路径写错了，是loader链没覆盖到。
典型表现：
- Bootstrap的
url()指向../fonts/glyphicons-halflings-regular.woff，但最终CSS里还是原样输出，没被转成base64或hash路径 - 构建后CSS文件里出现
url(../fonts/xxx)，而浏览器从/css/app.css加载时，向上找一级根本没fonts目录
实操建议：
- 给
css-loader加options: { url: true }（Webpack 5+默认true，旧版需手动开） - 确保
file-loader或url-loader的test规则能匹配到第三方库路径，例如/\.(woff|woff2|eot|ttf|svg)$/i加上include: [path.resolve(__dirname, 'node_modules')] - 更稳妥的做法：把第三方库的静态资源（字体、图标）复制到
public/下，再用additionalData全局重写变量，例如$icon-font-path: "/fonts/bootstrap/";
uni-app或Vue CLI项目中sass-loader版本冲突
新版sass-loader（v12+）废弃了prependData，改用additionalData。如果你的项目模板还留着老配置，或者用了vue-cli-plugin-sass-resources-loader这类插件，启动时会直接报Invalid options object。
错误信息里明确提示：options has an unknown property 'prependData'。
实操建议：
- 检查
sass-loader版本：npm list sass-loader，v8以下用prependData，v10+必须用additionalData - 升级时同步改配置：
prependData: `@import "@/styles/vars.scss";`→additionalData: `@import "@/styles/vars.scss";` - uni-app用户特别注意：它的内置sass支持基于旧版
sass-loader，强行升级到v12会导致编译中断，降级到sass-loader@10.4.1最稳
第三方库的路径问题从来不是“写对就行”，而是构建工具、loader链、运行时上下文三者对齐的结果。最容易被忽略的是：同一个@import语句，在你的代码里走Webpack别名，在第三方库代码里却可能走includePaths硬编码——它们根本不在一个解析体系里。
