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

发布于 2022年 05月 01日 16:06

腾讯服务器

88 / 年

  • 上海/北京/广州...
  • 2核 2G 4M
  • Linux/Windows
新年大优惠

腾讯服务器

425 / 年

  • 上海/北京/广州...
  • 4核 8G 10M
  • Linux/Windows
年度最便宜

腾讯服务器

1249 / 年

  • 上海/北京/广州...
  • 8核 16G 14M
  • Linux/Windows
点击查看

什么是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">

推荐文章