Material theme overwrites global SCSS variables

[AJMaxwell]

Issue

Importing vue-snotify Material theme via SCSS @import overwrites global variables with identical names.

Background

I am using the Bulma CSS framework and a number of color variables are being overwritten by vue-snotify's Material theme.

app.scss

// How Bulma recommends customizing colors
$primary: #f58220;
$primary-invert: findColorInvert($primary);
$info: #007eb9;
$info-invert: findColorInvert($info);
$success: #4f8f31;
$success-invert: findColorInvert($success);
$success-bg: lighten($success, 45%);
$success-border: darken($success, 10%);
$warning: #8a6d3b;
$warning-invert: findColorInvert($warning);
$danger: #d9534f;
$danger-invert: findColorInvert($danger);
$danger-bg: lighten($danger, 38%);
$danger-border: darken($danger, 10%);

@import '~bulma/sass/utilities/derived-variables';
$add-colors: (
	"primary":($primary, $primary-invert),
	"info":($info, $info-invert),
	"success":($success, $success-invert),
	"warning":($warning, $warning-invert),
	"danger":($danger, $danger-invert)
);
$colors: map-merge($colors, $add-colors);

node_modules/vue-snotify/styles/material/icon.scss

$success: #c8e6c9;
$info: #bbdefb;
$warning: #ffccbc;
$error: #ffcdd2;
$async: $info;

Example
Text colored with $success displays as #c8e6c9 instead of #4f8f31.

Workaround

I have found a couple ways to work around this:

• Import Material theme before any other SCSS
• Import Material theme via ES6

Possible Solution

Change Material color variable names to something unique, perhaps with a prefix or suffix: $snotify-success or $success-snotify. This is less of a bug and more of a hiccup that users may stumble across while using this plugin.

Thanks for the awesome plugin, and keep up the good work!