1s学会如何在css、html中使用alias相对路径

什么是alias

顾名思义，alias，即别名，当我们在用 webpack处理打包时，可将某一目录配置一个别名，代码中就能使用与别名的相对路径引用资源。

举个栗子

有些同学在js中引用某个文件时，可能会用到相对路径import tool from '../../utils/tool.js' ，这样即不直观，有时写好多../也容易出错。如果我们配置了alias，就可以直接通过import tool from '@/utils/tool.js'引用到需要的文件啦。

如何配置alias

在webpack的配置文件的resolve中，把需要的别名如'@'和对应的路径如'src'添加上就可以了。

...,
resolve: {
  ...,
  alias: {
    '@': resolve('src')
  }
}
复制代码

如何在css、html中使用alias

有的同学可能会在css引用到公共的样式，也想使用配置的alias，但是写好了保存，duang~，报错了，提示找不到对应的目录。为啥？原因就是css 文件会被用 css-loader 处理，这里 css @import 后的字符串会被 css-loader 视为绝对路径解析，因为我们并没有添加 css-loader 的 alias，所以会报找不到 @ 目录。怎么办？

敲黑板，重点来了。 我们只需要在引用路径的字符串最前面添加上 ~ 符号，如 @import "~@/style/global"; webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析，这样 @ 的 alias 配置就能生效了。如：

• css module 中： @import "~@/style/global"

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

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