I have an Angular 14 project and I've installed ng-bootstrap. I'm trying to customise some of the bootstrap components. I realise I have to create my custom variables and then import the bootstrap sass components, however I can't seem to work out how to do this.
At the root of my project, I have a styles.css file. However in order to import the bootstrap sass, I need to convert this to a .scss file. I've therefore created one and imported the bootstrap sass with my custom variables like so:
The problem is I can't get my Angular project to load this, and I'm not sure why not.
I have the following in my angular.json file:
As you can see, I tried adding a styles property under options but I get an error that it doesn't conform to the schema. I find this strange as I can see a styles option under the build tree like so:
So my question is: How does one load a custom styles.scss file where I can import bootstrap and override bootstrap variables to create custom components?