In my custom project, I've defined a unique class in the sample.scss file.
.custom-class {
@extend .rounded-pill;
@extend .border;
@extend .bg-light;
}
During compilation, an error is generated stating:
The target selector was not found. Utilize "@extend .rounded-pill !optional" to prevent this error
By changing it to @extend .rounded-pill !optional, I resolve the error. However, the classes .rounded-pill, .border, and .bg-light are not imported/applied to custom-class as intended. Is there a method to extend Bootstrap CSS classes without importing them directly into my project?
The goal is to include Bootstrap's CDS and create my own extending classes from Bootstrap.
If I incorporate
@import ../node_modules/bootstrap/scss/bootstrap';UPDATED
To provide further clarity, here is an example of what I aim to achieve:
In the custom-close.scss file, when compiled, the following SCSS code should produce a new CSS file named custom-close.css.
@import ../node_modules/bootstrap/scss/_close';
@import ../node_modules/bootstrap/scss/_buttons';
.custom-close {
@extend .btn;
@extend .btn-close;
padding: 0;
}
It can be observed that I'm importing the _close.scss and _buttons.scss files from the Bootstrap module.
However, importing both _close and _buttons leads to inclusion of ALL the code within those respective files in the final output file (custom.css).