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

项目中使用的是 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");

参考资料