左小白的技术日常
Github

Vue 组件中 css 路径简写 @ 不可用,需要使用 ~@

这篇文章发布于 2021/05/04,归类于
标签:
vue css src 路径css @ 不生效css src 简写@webpack 解析 css 路径

Vue css src 路径,css @ 不生效,css src 简写@, webpack 解析 css 路径

在 vue-cli 创建的 vue 项目中,可以使用 @ 来表示 src 路径。但在 css 中,图片路径使用 @ 就会出错。那 css 中要怎么使用 src 相对路径呢?

需要在前面加 ~,也就是 ~@,这样就不必使用相对路径了。

#img {
  height: 100px;
  width: 100px;
  background: url("~@/assets/logo.png");
  background-size: contain;
}

为什么呢?可能的原因是 @ 是 css 的保留关键字,在 @import 的时候会用到,为了避免冲突,才使用 ~@ 以示区分。

webpack 中使用 css-loader 来处理 css,具体逻辑可以看 css-loader 源码

参考: