Static GitHub Issues

[601] Extend Global SCSS Stylesheet in Component

prev: doesn't work window.onscroll
next: Inline styles do not update properly when SSR

Question There may be an obvious solution that I am overlooking, but I am not able to import my main.scss file from assets into a component.

<style lang="scss" scoped>
@import '~assets/main.scss';
</style>

This generates the following error:

This dependency was not found:

* !!vue-style-loader!css-loader!../node_modules/vue-loader/lib/style-compiler/index?{"id":"data-v-3bb4be04","scoped":true,"hasInlineConfig":true}!sass-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./NavBar.vue in ./components/NavBar.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader!../node_modules/vue-loader/lib/style-compiler/index?{"id":"data-v-3bb4be04","scoped":true,"hasInlineConfig":true}!sass-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./NavBar.vue

I have installed vue-style-loader and added it to my config file:

vendor: ['vue-style-loader'],

TLDR: How can I import a SCSS stylesheet from assets into a component?

Thanks, Christopher

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c519">#c519</a>)</em></sub></div>