webpack 配置 alias 相对路径 @import 引用报错

发表于 更新于 分类于
本文字数： 436 阅读时长 ≈ 1 分钟

项目中使用的是 less，一个 less 文件需要引用另外一个 less 文件：

1
@import "@/assets/base.less";

其中，@是在 webpack 中配置的 alias 相对路径，结果报错了：

1
2
3
@import "@/assets/base.less";
^
Can't resolve './@/assets/base.less' in xxxxxx

解决方法是在引用路径的字符串前面加上～的符号，如上面就是这样写：

1
@import "~@/assets/base.less";

因为 webpack 会以～符号作为前缀的路径视为依赖模块去解析。 另外，CSS 里面有路径引用的，都可以使用这种方法。比如 background 等：

1
background-image: url("~@/assets/logo.jpg");

参考资料