When developing an app, I utilize browserify along with vueify. My goal is to inject a global SCSS file containing variables, mixins, colors, etc., into Vue so that it is accessible to all components without the need for explicit import statements in each component.
The main.scss file located at public/app/styles/main.scss has the following structure:
// public/app/styles/main.scss
// Helpers
@import "helpers/mixins";
@import "helpers/variables";
@import "helpers/colors";
// Base
@import "base/reset";
@import "base/typography";
@import "base/base";
// Layout
@import "base/layout";
Within the gulp.js file, the configuration includes the following snippet:
// gulp.js
gulp.task("build_js", () => {
return browserify({
entries: config.app.index,
cache: {},
dev: true
})
// [...]
.transform(vueify, {
sass: {
includePaths: ["public/app/styles", "public/app/styles/main.scss"]
}
})
// [...]
});
The error arises when attempting to use a globally defined SCSS variable within the App.vue component:
<!--App.vue-->
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped lang="scss">
#app {
width: 100%;
height: 100%;
background-color: $backgroundColor;
}
</style>
This results in the error message:
Error: Undefined variable: "$backgroundColor". while parsing file: D:\Users\revy\Documents\myapp\public\app\components\App.vue
I am seeking guidance on resolving this issue. What steps should I take?