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.
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