Cannot resolve scss imports with Vue-CLI 3

Importing scss files inside .vue files doesn't work in IDE:

@import "@/styles/mixins.scss"

Shows an error: cannot resolve file "mixins"

I even tried:

@import "~@/styles/mixins.scss" from this issue: https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000903779-vue-scss-file-cannot-resolve-?input_string=Cannot%20resolve%20scss%20imports%20with%20Vue-CLI

But it has no effect.

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

@import "~@/styles/mixins.scss" should work; please share a project the issue can be reproduced with

0

Yes, we solved in: https://youtrack.jetbrains.com/issue/WEB-41886

But we faced another issue using

@import '~@fortawesome/fontawesome/test.scss'

1

Why can't WebStorm resolve the "~@/" directory?

`@import "~@/styles/helpers/_environment.scss";`

Webpack config is enabled, and everything compiles as expected. I don't understand why WebStorm shows "Can't resolve" error.

1

this should work - see above. Please share a sample project the issue can be reproduced with

0

Like I said before, it does compile as expected, but the IDE shows the error. Because I'm linting the code, I'd like that indication would be fixed somehow.

1

Please sign in to leave a comment.