webpack构建环境中使用别名无效解决方案

发表于:2019-05-23

通常在编码的过程中引入图片会使用 @ 作为别名来映射到 src 路径

例如在react

同样尝试在css中使用别名

会发现并没有成功映射到src目录,而是被当做真实目录去渲染了。

原因

因为 @ 并没有添加进 css-loader alias当中,所以不会被解析处理。

解决方案

使用 ~@ 作为别名映射到 src, 因为 ~@ 会被webpack进行处理。

例如:

css

body {
  background: url("~@/assets/img/screenshot.png");
}

html 在某些版本中使用 @ 会无效,可以尝试使用下面这种方式

<img src="~@/assets/img/screenshot.png">

最后

由于不同的webpack版本会有一些差异,或者是内置的loader被进行处理过,可以尝试使用以下几种方法:

body {
  background: url("~@/assets/img/screenshot.png");
  background: url("~assets/img/screenshot.png");
  background: url("@/assets/img/screenshot.png");
}
其他
广告