webpack 配置alias 引用非js文件的静态资源报错

具体使用
在 webpack 中配置：

  alias: { // 设置别名
      '@styles': path.resolve(paths.appSrc, 'styles'),
  }

less中引入,报如下错，说明 webpack 没有正确识别资源相对路径

@import '@styles/base.less';

image.png

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/..." />