网络风暴。当我在 .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 目录，则特定于 webpack 的导入（如“@import '~webpackPackage/test.css'”）不会导致错误.见https://youtrack.jetbrains.com/issue/WEB-23707#comment=27-1657238