Currently, I am utilizing a package known as Buefy, which acts as a Vue.js wrapper for the Bulma CSS framework library. Within Buefy's template components, there is an attribute/property called type (e.g., type="is-warning"). According to the documentation provided by Buefy, the term "is-warning" is predetermined based on the $colors variable set within SCSS:
You can view the color mapping in this image: https://i.stack.imgur.com/dDEDs.png
To customize the $colors map as desired, I followed the instructions outlined on the Buefy website. However, my intention is to maintain the original SCSS settings from those instructions in a single file named base.scss, and then expand upon it with my unique customized SCSS file.
In order to include the base.scss file in my Vue project, I added the following code snippet to the vue.config.js file:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
@import "@/assets/scss/base.scss";
`
}
}
}
}
My inquiry is regarding how I can enhance the $colors map specified in the base.scss with my own custom names and values without altering the original setting. Here is a portion of the base.scss where the $colors map is defined:
$colors: (
"white": ($white, $black),
"black": ($black, $white),
"light": ($light, $light-invert),
"dark": ($dark, $dark-invert),
"primary": ($primary, $primary-invert),
"info": ($info, $info-invert),
"success": ($success, $success-invert),
"warning": ($warning, $warning-invert),
"danger": ($danger, $danger-invert),
"twitter": ($twitter, $twitter-invert)
);
Therefore, my question remains: How can I extend the $colors map in a separate file outside of base.scss (potentially in App.vue) while preserving the original configuration? I have not found a solution in the SCSS documentation.