0

I'm using vue webpack template. I have a component with its own styles located in a separated file (say, style.scss in /components/my-component/)

I refer to another .scss using @ alias like this:

@import "@/assets/scss/variables.scss" and webpack couldn't resolve it. So now I have to use this instead:

@import "../../../assets/scss/variables" which is bad.

Basically the error says it couldn't resolve this import. I came from here: https://github.com/vuejs/vue-loader/issues/328, just want to keep a global .scss file with variables which I will be able to use in local component styles

Victor
  • 5,073
  • 15
  • 68
  • 120
  • what does the "@" resolve to in your webpack config? Also what extensions does it resolve? – nizantz Mar 20 '18 at 23:24
  • It resolves to "src" folder. Hm, I've just found out that it did not resolve .scss files (extensions: ['.js', '.vue', '.json']), so I added this extension (extensions: ['.js', '.vue', '.json', '.scss']) but it still does not work – Victor Mar 21 '18 at 00:40
  • Just do `@import "~@/assets/..."` – Ricky Ruiz Mar 21 '18 at 02:00
  • https://github.com/webpack-contrib/sass-loader#imports – Ricky Ruiz Mar 21 '18 at 02:21

0 Answers0