[Vuejs]-Browserify/vueify: inject global scss file in all components

by

0👍

The issue is that your variable $backgroundColor has not been defined. Most likely, the file that defines it has not been bundled.

You can solve that by importing your main.scss file in the component style block, and it should be resolved.

<!--App.vue-->

<template>

    <div id="app"></div>

</template>

<script>

    export default {

        name: "App"

    }

</script>

<style lang="scss" src="public/app/styles/main.scss"></style>
<style scoped lang="scss">

    @import "public/app/style/main.scss";

    #app {
        width: 100%;
        height: 100%;
        background-color: $backgroundColor;        
    }

</style>

You might have to change the path, as I am not sure what your files structire looks like.

However if the import doesn’t work, You can try including the file directly from the component using a style tag with a src attribute :

<!--App.vue-->

<template>

    <div id="app"></div>

</template>

<script>

    export default {

        name: "App"

    }

</script>

<style lang="scss" src="public/app/styles/main.scss"></style>
<style scoped lang="scss">

    #app {
        width: 100%;
        height: 100%;
        background-color: $backgroundColor;        
    }

</style>

With this syntax, the bundler will load the SCSS file directly and resolve all the imports within.

Leave a comment