网络风暴。当我在 .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-specific 模块解析（resolve.moduleDirectories、resolve.root、resolve.alias 等）。请注意，为样式表语言（LESS、SCSS）提供了基本支持，因此如果 ~ 等于 node_modules 目录。参见 https://youtrack.jetbrains.com/issue/WEB-23707#comment=27-1657238

网络风暴。当我在 .vue 中定义 scss 时，“@import 'xxx'”显示错误

WebStorm. When I define scss in a .vue,the "@import 'xxx'" display error

settings

webstorm