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 file @import does not recognize resolve alias

Answer 2

您是否尝试将带有“〜”的路径设置为节点模块？ 并且，对于使用“ @”别名，您应该在webpack.config中进行设置 see here