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.

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. 


How to style a large project in Vue.js

Product

Explore

Company

Blogs

Support