【記錄】vue項目中@import 後面的波浪號~ 代表什麼意思

在使用vue-element-admin框架的時候，發現原來導入樣式也可以這也寫！寫法挺高級的，就此記錄下~

由於是在webstorm中編寫的項目，編輯器好像不識別這種寫法，所以一直報錯。

這種寫法其實是webpack中的一個配置。這裏用~符號,表示後面的值爲 alias, 然後就會去vue.config.js的 alias 配置中找相應的值。

然後拼接成最後的地址：

'src/styles/mixin.scss'
'src/styles/variables.scss'

注意：
我們必須加上 ~符號，否則我們可能會因爲找不到而報錯。

當然，我們也可以在vue.config.js中添加其它的 alias 配置自定義字符a

   resolve: {
      alias: {
        '@': resolve('src'),
        'a':resolve('src/styles')
      }
    }

然後我們可以在其它組件中進行使用

@import '~a/sidebar.scss'

相當於：

'src/styles/sidebar.scss'

---

相關文章鏈接：
https://www.webpackjs.com/configuration/resolve/#resolve-alias
https://cli.vuejs.org/zh/config/#integrity

---

如果您也正在學習前端的路上，記得關注該博主，學習更多關於前端的知識~

博主主頁 Poetic Code