browserify / vueify: внедрить глобальный файл scss во все компоненты

Проблема в том, что ваша переменная $backgroundColor не была определена. Скорее всего, файл, который определяет его, не был в комплекте.

Вы можете решить это, импортировав файл main.scss в блок стиля компонента, и он должен быть решен.

<!--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>

Возможно, вам придется изменить путь, так как я не уверен, как выглядит структура ваших файлов.

Однако, если импорт не работает, вы можете попробовать включить файл непосредственно из компонента, используя тег style с атрибутом src:

<!--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>

С этим синтаксисом, упаковщик загрузит файл SCSS напрямую и разрешит все операции импорта внутри.