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.
Please sign in to leave a comment.
@import "~@/styles/mixins.scss" should work; please share a project the issue can be reproduced with
Yes, we solved in: https://youtrack.jetbrains.com/issue/WEB-41886
But we faced another issue using
@import '~@fortawesome/fontawesome/test.scss'
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.
this should work - see above. Please share a sample project the issue can be reproduced with
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.