I am migrating a Angularjs project to Vue.js. We had a lot of base styles over there and we were using SCSS. These included files with variables and custom buttons which we used across the application. Now as we move towards component level scoped CSS. I still want to have those base styles so that theming and changing color code of the whole website remains a painless task.
One way to deal with this is keep importing those files in my component level CSS which seems like a bad idea.
One good idea might be that, when webpack is building my main.scss file, it extracts css from all the components and concatenates them with the existing base file, so that all the variables are resolved and we have nice inlined CSS with id selector per component.
Is this a good approach. If yes, how would I go about doing it? Also if anyone is using some other practice. I would love to hear about it as well.
J03
Just another bit in the byte
Tareq Hassan
Frontend Engineer/ JavaScript FTW
Use theming classes for your application. every good designed application can use up to 3 colors. define these classes at the beginning of your application.
$skin-color-1: black; $skin-color-2: white; .skin-color-1{ color: $skin-color-1; } .skin-color-2{ color: $skin-color-2; } .skin-bg-color-1{ background-color: $skin-color-1; } .skin-bg-color-2{ background-color: $skin-color-2; }then pass these classes to every html object with its color, and remove the color properties that is already assigned.