具体使用
在 webpack 中配置:
alias: { // 设置别名
'@styles': path.resolve(paths.appSrc, 'styles'),
}
less中引入,报如下错,说明 webpack 没有正确识别资源相对路径
@import '@styles/base.less';
less-loader处理成css 文件后,会被 css-loader 处理,这里的”@styles/…”会被 css-loader 当做绝对路径处理。因为我们并没有添加 css-loader 的 alias,所以报错。
在 webpack 中 css import 使用 alias 相对路径的解决办法有两种:
直接为 css-loader 添加 alias 的路径。
在引用路径的字符串前面加上 ~ 的符号,如:@import “~@styles/…”。webpack 会以~符号作为前缀的路径视为依赖模块去解析。
例如:
css module 中: @import “~@styles/…”;
css 属性中: backaground:url(‘~@assets/…’)
html 标签中:<img src="~@styles/..." />