SCSS中@import报“Can't resolve”根本原因是Webpack别名未透传至sass-loader，需同时配置resolve.alias和sass-loader的webpackImporter: true，并确保别名值为绝对路径。
SCSS里@import报Can't resolve './xxx'怎么办
路径写错是表象，根本原因是Webpack没把你的别名映射到实际目录。SCSS本身不解析~或@这类别名，得靠sass-loader配合resolve.alias才能生效。
常见错误：只在resolve.alias里配了@: path.resolve('src')，却没告诉sass-loader去读这个配置——它默认不继承Webpack的resolve设置。
- 必须在
sass-loader的options里显式传入webpackImporter: true（Webpack 5+ 默认启用，但老项目容易漏） - 如果用的是
node-sass（已废弃），需额外加includePaths字段指向node_modules和别名根目录 -
@import 'styles/variables'能工作，不代表@import '@/styles/variables'也能——后者依赖~前缀或sass-loader对resolve.alias的透传
Webpack中resolve.alias和sass-loader怎么配才真正生效
别名要分两层生效：JS模块引用走resolve.alias，SCSS的@import则需要sass-loader把路径转发给Webpack resolver。
关键配置片段（Webpack 5+）：
module: {
rules: [{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
// 必须开启，否则 alias 不生效
webpackImporter: true,
// 可选：额外指定 includePaths（尤其当 alias 涉及多级嵌套时）
additionalData: `@import "@/styles/_globals.scss";`
}
}
]
}]
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'styles': path.resolve(__dirname, 'src/styles')
}
}
-
webpackImporter: true是开关，关掉就退化成原生Sass解析器，不认识@或~ - 别名值必须是绝对路径（
path.resolve），相对路径会导致Can't resolve - 如果SCSS文件在
node_modules里被引用（比如第三方UI库），需在includePaths里手动加node_modules，否则@import '~xxx'会失败
@import用~还是@？路径前缀到底怎么选
~是sass-loader的特殊前缀，表示“从node_modules开始找”；@是纯别名，完全依赖resolve.alias配置。两者不互通，也不能混用。
-
@import '~bootstrap/scss/functions'→ 查node_modules/bootstrap/scss/functions.scss -
@import '@/styles/mixins'→ 查src/styles/mixins.scss（前提是alias: { '@': 'src' }） -
@import 'styles/mixins'→ 查src/styles/mixins.scss（前提是alias: { 'styles': 'src/styles' }） - 写成
@import '@styles/mixins'（带@但没配别名）或@import '~~/mixins'（多余波浪线）都会报错
为什么url()里的图片路径别名不生效
SCSS中的url()不是@import，它不经过sass-loader的路径解析逻辑，而是直接交给css-loader处理。所以url('@/assets/logo.png')会404。
- 正确做法：用
~前缀让css-loader接管，如url('~@/assets/logo.png')（需确保@已在resolve.alias中定义） - 更稳妥的方式：在
css-loader里启用url: true（默认开启），并确认options.modules.exportLocalsConvention不影响路径提取 - 如果用了
file-loader或asset-module，注意public目录下的资源不能用别名，必须写相对路径或/static/xxx
别名链路其实很脆弱：SCSS解析 → sass-loader转发 → Webpack resolver匹配 → css-loader再处理url。任一环缺失或配置错位，路径就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
