WebStorm 无法解析 scss 导入

Question

WebStorm 2019.2 / Vue-CLI

带有 scss 导入的 App.vue 文件：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';
@import '@/assets/scss/app.scss';
</style>

没有一个 scss 文件被成功解析：

我已经尝试将我的 src 文件夹设置为资源根目录 - 无效。我认为 WS 可以很好地处理任何与前端相关的开箱即用的东西……因为 VSCode 可以。这是一个错误吗？或者我做错了什么。

更新 1

我去了首选项>语言和框架/JavaScript/Webpack并将路径设置为/Users/alexanderkim/Sites/vueproject/node_modules/@vue/cli-service/webpack.config.js，但它仍然没有看到别名。

Answer 1

请尝试使用 tilda 为导入路径添加前缀：

@import '~@/assets/scss/app.scss';

这是一个 sass-loader 功能，适用于node_modules和 webpack 别名。参见 https://webpack.js.org/loaders/sass-loader/#imports , webpack (with sass-loader) - scss 文件 @import 无法识别解析别名