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.

2 Answers 2

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

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

1
  • Tilda works for node_modules, but "@" alias is setup in vue-cli tool. Oct 15, 2019 at 5:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.