CODEWITHSUNDEEP
vue.jsintellij-ideasasswebstorm
Alexander Kim
Alexander Kim

Reputation: 18402

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.

Upvotes: 2

Views: 2449

Answers (2)

lena
lena

Reputation: 93748

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

Upvotes: 6

vvxcoder
vvxcoder

Reputation: 339

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

Upvotes: 0

Related Questions