Webpack中css import使用alias会报错，因css-loader不参与模块解析，@import在CSS中需由postcss-import或sass-loader等预处理器处理；sass-loader需配置includePaths，postcss-import需桥接webpack resolver，VS Code也不识别resolve.alias。
Webpack 中 css import 使用 alias 会报错找不到文件
直接在 .css 或 .scss 里写 @import 'Src/components/button.css';，Webpack 默认不识别 resolve.alias 配置 —— 这是常见误解的根源。CSS loader（如 css-loader）本身不参与模块解析，它只处理已由 webpack 解析完的资源路径；而 @import 在 CSS 中属于原始文本指令，需靠 postcss-import 或 sass-loader 等预处理器解析，它们默认只认相对路径和 node_modules。
让 SCSS/SASS 支持 alias 的正确方式
如果你用的是 sass-loader（最常见），必须显式启用它的 additionalData 或更关键的 implementation + sassOptions.includePaths，否则 alias 不生效。
-
sass-loaderv12+ 要求传入sass实例，并配置includePaths：例如path.resolve(__dirname, 'src')，这样@import 'styles/vars';才能命中src/styles/vars.scss - 别名不能直接写成
'@styles/vars'——sass原生不支持符号别名，只支持物理路径列表；includePaths是让它“从这些目录开始找”，不是“把 @ 替换成某路径” - 若你坚持用
@前缀，得配合postcss-import插件 +resolve.alias，但前提是 CSS 文件被postcss-loader处理，且postcss-import的resolve选项要与 webpack 的resolve.alias同步（需手动桥接，容易漏）
PostCSS 场景下 alias 的最小可行配置
当项目用 postcss-loader + postcss-import 处理 .css 文件时，alias 生效依赖两个条件：loader 链顺序、以及 postcss-import 的 resolve 函数是否复用 webpack 的 resolver。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 确保
postcss-loader在css-loader之前（否则@import不会被解析） - 在
postcss-import选项中传入resolve函数，调用webpack.config.js中的resolver实例（需通过webpack.LoaderContext获取，较麻烦） - 更简单做法：改用
postcss-url+ 自定义url解析逻辑，或直接放弃 CSS 中的 alias，把变量/混合统一抽到 SCSS，只在 SCSS 层做includePaths
VS Code 跳转和类型提示为何不工作
即使 webpack 打包成功，编辑器点击 @import 'utils/mixins' 仍打不开文件 —— 因为 VS Code 依赖 jsconfig.json 或 tsconfig.json 的 paths，而它对 CSS/SCSS 文件默认不生效。CSS 文件没有 TS 类型系统，编辑器不会读取 paths 映射。
立即学习“前端免费学习笔记（深入）”；
- VS Code 对
.scss的跳转依赖Sass扩展或内置语言服务，仅支持基于includePaths的物理路径，不理解resolve.alias - 若你用
stylelint或prettier，它们同样不感知 webpack alias，可能报路径不存在警告 - 真正可靠的方案：所有样式入口统一放在
src/styles/index.scss，其他文件只用相对路径导入，避免在组件级 CSS 中直接@import别名路径
resolve.alias 就万事大吉 —— 实际上它只对 JS/TS import 生效，CSS 里的 @import 是另一套规则。 
