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的配置文件