angular-cli how to add sass and or bootstrap?

Question

I\'m trying out angular-cli and trying to get sass and bootstrap in the project. I\'ve read in the wiki that you can simply do:

ng install sass

Answer 1

Thanks to Woot for his answer, this answer is more for .NET Core 2.0/2.1 developers using the angular seed project via:

#get lastest SPA templates and make sure angular CLI is global
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::*
npm install -g @angular/cli

#create a new project, default for target framework doesn't seem to be working when .NET Core 2.1 SDK is Installed
dotnet new angular -f netcoreapp2.0 -o test-web-app

This seed project still uses a bootstrap 3 version so it requires the download of bootstrap-sass (or an upgrade to bootstrap 4 which includes scss support in the base node module):

npm install bootstrap-sass --save-dev

In the .angular-cli.json file change the styles configuration from this:

"styles": [
   "styles.css",
   "../node_modules/bootstrap/dist/css/bootstrap.min.css"
]

to:

"styles": [
   "styles.scss",
   "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"
]

And as Woot pointed out, the upgrade of the angular cli configuration to create scss files instead of css files when autocreating file should also be performed by:

ng set defaults.styleExt scss

And renaming you styles.css file to styles.scss is required.

The angular CLI and angular version are also slightly out of date as of this writing (1.7.0 and 5.2.0), so this answer is subject to change once those are upgraded. But as of right now, this works and nothing else needs to be done to allow:

dotnet run

to support the automatic compilation of scss to css and serving the files under the hood via ng serve.