app.scss error on bootstrap 5 upgrade

[shravanv90]

Getting a build error on vanilla-search upgrade of bootstrap 5 update.

Bootstrap version 5.1.3

Error: ./projects/vanilla-search/src/styles/app.scss
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
  ╷
6 │ ┌     @include hover-focus {
7 │ │       background-color: darken(lightgrey, 10%);
8 │ │       color: black;
9 │ └     }
  ╵
  projects\components\metadata\metadata.scss 6:5    @import
  projects\vanilla-search\src\styles\app.scss 53:9  root stylesheet
    at C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\Shravan\SBA\sba-angular-master\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Shravan\SBA\sba-angular-master\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Shravan\SBA\sba-angular-master\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass-loader\dist\index.js:56:7
    at Function.call$2 (C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass\sass.dart.js:89862:16)       
    at _render_closure1.call$2 (C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass\sass.dart.js:79036:12)
    at _RootZone.runBinary$3$3 (C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass\sass.dart.js:26612:18)
    at _FutureListener.handleError$1 (C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass\sass.dart.js:25140:19)
    at _Future__propagateToListeners_handleError.call$0 (C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass\sass.dart.js:25437:49)
    at Object._Future__propagateToListeners (C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass\sass.dart.js:4502:77)
    at _Future._completeError$2 (C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass\sass.dart.js:25270:9)
    at _AsyncAwaitCompleter.completeError$2 (C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass\sass.dart.js:24613:12)
    at Object._asyncRethrow (C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass\sass.dart.js:4251:17)   
    at C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass\sass.dart.js:13112:20
    at _wrapJsFunctionForAsync_closure.$protected (C:\Shravan\SBA\sba-angular-master\node_modules\@angular-devkit\build-angular\node_modules\sass\sass.dart.js:4276:15)

[hebus]

Hello @shravanv90 Our internal version is compatible with boostrap 5, but this version (in this repo) is not yet compatible with bootstrap 5. You should wait it's update or fix yourself the errors.

Here, a link to help you: https://getbootstrap.com/docs/5.1/migration/

The mixin hover-focus does not exists anymore in bootstrap 5. To fix it, replace @include hover-focus { ... } by &:hover, &:focus, &:active { ... }. &:active is optional.

E.g:

@include hover-focus {
  background-color: darken(lightgrey, 10%);
  color: black;
}

become

&:hover, &:focus, &:active {
    background-color: darken(lightgrey, 10%);
    color: black;
}

Beware, as directional names have changed, layout will be breaked. margin: ml- and mr- are renamed ms- and me- padding: pl- and pr- are renamed ps- and pe- and some others stuff

Please wait the next repository update (with bootstrap 5 support) or downgrade to bootstrap 4.