I have an existing website where I want to import Bootstrap CSS styles. The styles are clashing, so I want to scope the rules.
// node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss
.modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
}
// ---
// my-styles.scss
.my-selector {
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/modals";
}
This results in .my-selector.modal
, but I want to have .my-selector.modal
.
I want to avoid having to copy-paste the style rules. If I can somehow do it with @extend it would be already great.
Thanks for any suggestions.
I'm not sure that I completely understand the question because // node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss
is not parent of the current/standard Bootstrap SASS files.
If you're using the latest Bootstrap, _modal.scss
contains all the SASS modal source. So, if you wanted to @import all the modal rules/classes (.modal, .modal-header, .modal-body, etc...) to another parent my-selector
class it would be...
@import "bootstrap";
.modal.my-selector {
& {
@import "bootstrap/modal";
}
}
SASS Demo: https://codeply.com/p/XjYSfp0s8H
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.