webstorm 识别 vue-cli 中 scss 引入的 ~@ 路径别名

URL 转换规则

• 如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。

• 如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。

• 如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：

  <img src="~some-npm-package/foo.png">
  

• 如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @。(仅作用于模版中)

SCSS引入

在vue-cli中，使用scss引入样式文件，可使用 ~@ 表示 src 目录

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
</style>

IDE 设置

为了使webstorm可以正确识别此路径，需要修改webpack设置

设置——语言和框架——JavaScript——Webpack

指定为cli-service的配置文件