[Vuejs]-Overriding Components Styles w/ Global Stylesheet

1πŸ‘

I don’t think so that importing scss file inside bootstrap.js is a good idea.
You can create one main.scss file in /src/scss/ and inside that file put something down like that:

@import '~bootstrap/scss/bootstrap';
@import 'global/bootstrap/your_component';

@import 'helpers/overrides';

and depends of your needs change the path name.

Be sure that your file is imported in src/main.js by adding line:

import 'styles/main.scss';

This directory structure will be able to do some updates in the way like you want and will be easy to read and understand where the files are.

πŸ‘€test

1πŸ‘

You can declare CSS follow specificity. The rule in overrides.scss has the highest priority and in main.scss has lower. The rule in main.scss and component can have the same priority, but the rule in the component is declared later, so it will be applied to the element.

You can read more about this behaviour in: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Leave a comment