How to put custom bootstrap theme in Angular 12?-CodePudding

I have an angular website with bootstrap from npm and the @ng-bootstrap/ng-bootstrap. I really don't like the default theme. So I found some themes on bootswatch. and I downloaded the '_variables.scss' and the '_bootswatch.scss'.

In my style.css I had the following code working:

@import '~bootstrap/scss/bootstrap';

in my angular.json I put the following style config:

...
"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss",
              "src/_variables.scss",
              "src/_bootswatch.scss"             
            ],
..

And then I got the following error:

./src/_bootswatch.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/_bootswatch.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
15 │   font-family: $headings-font-family;
   │                ^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/_bootswatch.scss 15:16  root stylesheet

./src/_bootswatch.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.

I really will appreciate help!

CodePudding user response：

You're importing Bootstrap once and the other SCSS are not doing anything.

Create a new file in your src root (I like to create a new folder called 'styles' to keep it all neat, so put the other scss files there as well):

src/styles/styles.scss

In this new file, add:

@import "_variables.scss" (the first one takes precedance) @import "_bootswatch.scss" @import "../node_modules/boostrap/scss/boostrap.scss"

Your angular.json should only have your scss since all gets compiled:

"styles": [
              "src/styles.scss",
            ],

That's it. Also note, that I like to create a new file "_bootstrap.scss" instead of importing the one from node_modules, so I can remove the components I don't care about from Bootstrap like carousel.