0

I am trying to use some of the utility classes from bootstrap in my scss file.

example

.pageTitle { @extend .p-3, border-bottom: 1px solid red}

I am importing bootstrap like this @import '~bootstrap/scss/bootstrap-grid.scss';

When I try to extend the utility classes in many files, I have to include bootstrap.scss in multiple which is increasing my bundle size when I try to bundle using webpack. It also increases my build time drastically.

Is there a way to include the bootstrap.scss once and bundle it once as well?

Vipin Yadav
  • 1,616
  • 1
  • 14
  • 23
Ohm
  • 143
  • 2
  • 7

1 Answers1

-1

You could have a main scss file where you first import the required bootstrap scss files than you include your library files too.

Let’s call this “master” file project.scss now. So, your project.scss file could look like this:

// Extended Bootstrap files
@import '~bootstrap/scss/bootstrap-grid.scss';

// Projects styles
@import "typography";
@import "my-other-styles";
// …etc…

Where the _typography.scss and _my-other-styles.scss files are in the same directory as the project.scss file. This way all of your files will have access to the things that are defined in the imported Bootstrap files.

You could also have a look at the bootstrap.scss as an example. It first imports the functions, variables and mixins as these are used in the other scss files later on.

dferenc
  • 7,918
  • 12
  • 41
  • 49