Search code examples
vue.jsintellij-ideasasswebstorm

WebStorm cannot resolve scss imports

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:

enter image description here

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.

Solution

  • 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