webpack 引用模块路径中包含了~ – OnlyLing

在使用 webpack 开发的时候，引入一个模块

import xx from '../../../xxx/xxx'

通过会是上面这样的，但相对路径写着有点繁琐，就设置一个 alias 吧。

例如

resolve: {
  ...,
  alias: {
    '@': resolve('src')
  }
}

配置 @ 为项目根目录下放资源和源码的 /src 目录的别名。


import Utils from '@/utils'

于是就可以这样引入模块。

但是在 css 文件，如 less、 sass、 stylus 中，使用 @import '@/style/theme' 的语法引用相对 @ 的目录确会报错，”找不到 ‘@’ 目录”，说明 webpack 没有正确识别资源相对路径。

原因是 css 文件会被用 css-loader 处理，这里 css @import 后的字符串会被 css-loader 视为绝对路径解析，因为我们并没有添加 css-loader 的 alias ，所以会报找不到 @ 目录。

引用路径的字符串最前面添加上 ~ 符号，如 @import '~@/style/theme'； Webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析，这样 @ 的 alias 配置就能生效了。

各类非 js 直接引用（import require）静态资源，依赖相对路径加载问题，都可以用 ~ 语法完美解决。

例如 css module 中： @import '~@/style/theme'

css 属性中： background: url('~@/assets/xxx.jpg')

html 标签中： <img src="~@/assets/xxx.jpg" alt="alias">