Question 248397 in CSS Question posted in
Some basic documentation can be found here.

Is there a way to `@extend` bootstrap classes in SCSS without having to import bootstrap itself?

I have the following custom class defined in a sample.scss file.

.custom-class {
    @extend .rounded-pill;
    @extend .border;
    @extend .bg-light;
}

When I compile the code, I get the following error

messageOriginal: The target selector was not found. Use "@extend .rounded-pill !optional" to avoid this error

Changing it to @extend .rounded-pill !optional make the error goes away. However, the .rounded-pill, .border and .bg-light are not imported/applied to the custom-class as desired. Is there a way to extend bootstrap CSS classes without having to import bootstrap classes directly into my project?

The idea is to include bootstrap’s CDS and define my own classes that extend bootstrap.

If I add @import ../node_modules/bootstrap/scss/bootstrap'; everything works, but bootstrap code is imported into my files which I do not want.

UPDATED

For clarifications, here is an example of what I would like to accomplish,

I have the following code in custom-close.scss file. when compiled, the following SCSS code should result into a new CSS file called custom-close.css.

@import ../node_modules/bootstrap/scss/_close';
@import ../node_modules/bootstrap/scss/_buttons';

.custom-close {
    @extend .btn;
    @extend .btn-close;
    padding: 0;
}

As you can see, I am importing the _close.scss and _buttons.scss files from the Bootstrap module.

But, importing the _close and the _buttons causes ALL the code found in _buttons and _close files to be included into the final file (i.e, custom.css).

Tags:

2

Answers


  1. 0

    You cannot @extend something without importing it.

    Not sure what you mean by "bootstrap code is imported into my files which I do not want", but I can assure you there’s no downside to it. In fact, whenever you’re importing Bootstrap’s CSS, whether pre-compiled or as SCSS, you’re "importing Bootstrap’s code into your files".

    Here’s the official documentation on how to customise Bootstrap.

    To override any defaults, define their values before importing them from Bootstrap.

    To use Bootstrap @mixins, you have to import them from Bootstrap. There’s no other way.
    What you’re asking for is the equivalent of wanting to use a package in your code without importing it.

    Upon further clarifications, it seems that by "bootstrap code is imported into my files" you meant "bootstrap code is included into my build". To exclude any dependency from your package, declare that dependency as external. Each build tool (rollup, webpack, vite) has its own specific syntax around it. They’re fairly similar.

    To let a project consuming your package know it needs a particular other package in order for yours to work, you have to also declare that dependency in peerDependencies of your package.json. This will auto-generate a warning in console for any project installing your package which doesn’t have a compatible version of your peer dependencies installed in their project.

    As a side-note, you should change your imports to:

    @use 'bootstrap/...'
    Login or Signup to reply.
  2. 0

    are you looking for

    @import ‘../node_modules/bootstrap/scss/bootstrap-utilities.scss’;

    or

    @import ‘../node_modules/bootstrap/scss/_utilities’;
    @import ‘../node_modules/bootstrap/scss/utilities/api’;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search