CSS中alias不生效是因为css-loader默认不走Webpack resolve解析，必须加~前缀（如~@/styles/main.css）才能触发alias映射，否则按字面路径查找导致“Can't resolve”错误。
Webpack 的 resolve.alias 对 JS 文件生效，但直接在 CSS 中用 @import '@/styles/main.css' 会报错——因为 css-loader 默认把这种路径当绝对路径处理，不走 Webpack 的 alias 解析逻辑。
为什么 CSS 中的 alias 不生效？
JS 文件由 Webpack 原生解析，resolve.alias 自然生效；而 CSS（含 SCSS/Less）文件经 css-loader 处理时，@import 或 url() 中的字符串默认被当作文件系统绝对路径或相对当前 CSS 文件的路径，不会触发 Webpack 模块解析流程。
- 错误现象：
Module not found: Error: Can't resolve '@/styles/reset.scss' - 根本原因：Webpack 没介入该路径解析，
css-loader自己尝试按字面路径查找 - 注意：
@别名本身配置正确也没用，除非显式告诉 Webpack“这是模块路径”
必须加 ~ 前缀才能触发模块解析
Webpack 规定：以 ~ 开头的路径（如 ~@/styles/theme.scss）会被识别为模块请求，交由 Webpack 的 resolve 系统处理，此时 alias 才起作用。
- 正确写法：
@import '~@/styles/reset.scss'; - SCSS 中同样适用：
@import '~@sass/variables'; - 属性中也支持：
background: url('~@assets/logo.png'); -
~是硬性约定，少一个字符都不行；~~@/xxx或~ @/xxx（带空格）均无效
Vue 单文件组件中 <style> 标签的写法
在 .vue 文件的 <style> 块里使用别名，规则和纯 CSS/SCSS 一致，但要注意预处理器是否启用。
立即学习“前端免费学习笔记（深入）”；
- 如果用
<style lang="scss">，@import '~@/styles/mixin.scss';可用 - 如果用
<style>（纯 CSS），@import '~@/styles/base.css';也可用 - 不支持预处理器的项目（比如只配了
css-loader+style-loader），~仍有效——这是 Webpack 层行为，与 loader 类型无关 - 模板中
<img src="~@assets/icon.svg">同理，~触发模块解析
常见踩坑点
看似简单，但实际部署时容易卡住的地方集中在路径拼接和环境一致性上。
-
resolve.alias配置路径必须是绝对路径，用path.resolve(__dirname, 'src')，不能写'src'或'./src' - 修改
webpack.config.js后必须重启 dev server，HMR 不会监听配置变更 - Vue CLI 项目中，
vue.config.js的configureWebpack.resolve.alias写法同原生 Webpack，但别漏掉chainWebpack中覆盖css-loader的情况（极少见，一般不需要） - TS 项目若同时用
tsconfig.json的baseUrl+paths，和 Webpack alias 保持一致，否则编辑器提示和打包结果可能不一致
真正关键的不是 alias 配得多漂亮，而是所有非 JS 上下文（CSS、HTML、模板）里引用资源时，~ 这个符号不能省——它才是打通 Webpack 模块系统的唯一钥匙。
