devdeepak-hub / bootstrap-sass-use-migration

Bootstrap scss files migration to latest sass.
4 stars 1 forks source link

Bootstrap 5? #1

Open dotnetshadow opened 3 years ago

dotnetshadow commented 3 years ago

Hi there,

Firstly a cool project, I was wondering if you have intentions to upgrade this to bootstrap 5.

Also do you have a script that does this or was this all done manually? Would be nice to have this when updates are made to bootstrap

Supportic commented 3 years ago

I think Bootstrap 5 itself needs to reorder their imports or rewrite it to @use or @forward since the sass migrator script will always spit out the module loop problem. A workaround without using the migrator is a solution explained here. Import vendor modules in your global style file from the vendor folder which contains an _index.scss: @use "vendors" as *;. Inside your vendor folder you have a _index.scss file and a boostrap folder.

_index.scss

@use "bootstrap/custom" as custom;
@forward "bootstrap/sass/bootstrap.scss" with(
  $popover-bg: custom.$popover-bg
);

Inside your boostrap folder you have a sass folder containing all Bootstrap sass files and a _custom.scss. Now you can overwrite variables in your _custom.scss and pass it in your _index.scss to bootstrap by using the with keyword.

global.scss
|- vendors
  |- _index.scss
  |- bootstrap
    |- sass
    |- _custom.scss