1

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:

enter image description here

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:

enter image description here

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:

enter image description here

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?

Improve this question
1
  • You wrote styles.css instead of styles.scss Commented Mar 9, 2023 at 11:12
Related questions
367
Angular CLI SASS options
515
Error when trying to inject a service into an angular component "EXCEPTION: Can't resolve all parameters for component", why?
72
How to use Bootstrap 4 with SASS in Angular
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.