using sass variables in vue data
If you have a .scss
file that stores your project's colors, you can easily reference those values in Vue. I recently ran into this issue when using a third-party library that required styling information to be set in data()
. Overriding the default styles in this library using ::v-deep
was not an option because of the complexity of how this component renders. Luckily, importing sass variables to your javascript is really simple.
In your sass file, provide an :export
object:
:export {
Red: $red;
Orange: $orange;
Deepyellow: $deepyellow;
Canary: $canary;
Black: $black;
}
Then, in your Vue component, you can import these styles:
import styles from '@src/styles.scss';
You can then access these styles throughout the Vue component. In my case, I needed to set colors in data()
like this:
data() {
return {
eventDataTransform: eventData => {
return {
title: eventData.title,
start: eventData.start,
end: eventData.end,
borderColor: styles.Black,
textColor: styles.Black,
color: styles.Canary,
}
}
},