Home

Issue: 601

Extend Global SCSS Stylesheet in Component

[issue link]

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

This question is available on Nuxt.js community (#c519)