WebStorm 无法解析 scss 导入

Question

WebStorm 2019.2 / Vue-CLI

App.vue file with scss imports:

<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>

None of the scss files are successfully resolved:

I already tried to set my src folder as resource root - no effect. I thought WS is working well with anything frontend-related out of the box.. because VSCode does. Is it a bug? Or i am doing something wrong.

UPDATE 1

I went to Preferences > Language & Frameworks / JavaScript / Webpack and set path to /Users/alexanderkim/Sites/vueproject/node_modules/@vue/cli-service/webpack.config.js, still it doesn't see an alias.

Answer 1

Have you try to set your path with "~" to node-modules? And, for using "@" alias you should set up it in your webpack.config see here

Answer 2

Please try prefixing the import path with tilda:

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

this is a sass-loader feature that works both for node_modules and webpack aliases. See https://webpack.js.org/loaders/sass-loader/#imports , webpack (with sass-loader) - scss file @import does not recognize resolve alias