vue.js - 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

我去了 Preferences > Language & Frameworks/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 file @import does not recognize resolve alias