2

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.

Alexander Kim
  • 17,304
  • 23
  • 100
  • 157

2 Answers2

6

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

lena
  • 90,154
  • 11
  • 145
  • 150
0

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

Valerii Voronkov
  • 339
  • 1
  • 4
  • 16