webpack configuration alias references js file non-static resource error

DETAILED used
in webpack configuration:

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

less introduced, reported the following error described webpack not correctly identify the resource relative paths

@import '@styles/base.less';

image.png

After less-loader processed into css files, css-loader will be treated, where "@ styles / ..." will be treated as an absolute path css-loader. Because we do not add css-loader's alias, so an error.
In webpack in css import solutions using alias relative path in two ways:

• Add the alias path directly css-loader.

• In front of the string of reference paths - plus sign, such as: @import "~ @ styles / ...". webpack ~ symbol as will be considered dependent on the path prefix module to parse.

E.g:

css module in: @import "~ @ Styles / ...";
CSS properties: backaground: URL ( '~ @ Assets / ...')
HTML tags: <img src = "~ @ styles / ..." />