angular issue in scss file

Question

Below is my css file. After updating to angular 11, if i include last 2 rows am getting below error..

styles.css

@import '~simple-line-icons/css/simple-line-icons.css';
@import '~@ng-select/ng-select/themes/default.theme.css';
@import '~ngx-bootstrap/datepicker/bs-datepicker.css';
   
@import '~ngx-toastr/toastr-bs4-alert';    --if i add this am getting beow error
@import '~@coreui/coreui/scss/coreui';    --if i add this am getting beow error

Error

Error: ./src/styles.scss Module build failed (from./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from./node_modules/sass-loader/dist/cjs.js): SassError: Undefined mixin. ╷ 63 │ @include border-radius($alert-border-radius); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\ngx-toastr\toastr-bs4-alert.scss 63:5 @import src\styles.scss 6:9 root stylesheet at E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\webpack\lib\NormalModule.js:316:20 at E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at context.callback (E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\sass-loader\dist\index.js:56:7 at Function.call$2 (E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\sass\sass.dart.js:89862:16) at _render_closure1.call$2 (E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\sass\sass.dart.js:79036:12) at _RootZone.runBinary$3$3 (E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\sass\sass.dart.js:26612:18) at _FutureListener.handleError$1 (E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\sass\sass.dart.js:25140:19)
at _Future__propagateToListeners_handleError.call$0 (E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\sass\sass.dart.js:25437:49) at Object._Future__propagateToListeners (E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\sass\sass.dart.js:4502:77) at _Future._completeError$2 (E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\sass\sass.dart.js:25270:9) at _AsyncAwaitCompleter.completeError$2 (E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\sass\sass.dart.js:24613:12) at Object._asyncRethrow (E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\sass\sass.dart.js:4251:17) at E:\WorkSpace\BankingSolutions\CPS\Web.UI\cps\node_modules\sass\sass.dart.js:13112:20 at _wrapJsFunctionForAsync_closure.$protected (E:\WorkSpace\ BankingSolutions\CPS\Web.UI\cps\node_modules\sass\sass.dart.js:4276:15)

Am using anglar 11 projects..Pls any one suggest

Answer 1

Install "css-loader": "^2.1.0"

npm i css-loader