WebStorm。當我在.vue定義SCSS中， 「@import 'XXX'」 顯示錯誤

Question

demo.vue：

<template> 
    ... 
</template> 
<script type="text/ecmascript-6"> 
    ... 
</script> 
<style lang="scss" rel="stylesheet/scss"> 
    @import "~scss/variables.scss"; 
    .pop-up-box { 
     ... 
    } 
</style> 

一切都很好：編碼，編譯工作。

只是WebStorm將在

@import "~scss/variables.scss"; 

由於WebStorm的顯示錯誤要檢查的~scss/variables.scss的路徑，但這個路徑是的WebPack別名。 它會顯示Cannot resolve directory '~scss'。

有什麼辦法讓WebStorm在這裏知道是一個webpack別名還是隻是不顯示錯誤？

Answer 1

目前沒有辦法，請按照WEB-25321的更新。 WebStorm不支持​​解決Webpack特定模塊（resolve.moduleDirectories,resolve.root,resolve.alias等）。 請注意，爲樣式表語言（LESS，SCSS）提供了基本支持，因此如果~等於node_modules目錄，那麼像「@import」〜webpackPackage/test.css'這樣的webpack特定導入不會導致錯誤。見https://youtrack.jetbrains.com/issue/WEB-23707#comment=27-1657238