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

NOTE: This answer is out of date due to changes in the Angular CLI, please refer to the answer below from Woot which is more current.

You need to install node-sass via npm i node-sass --save-dev then change your styleExt in angular-cli.json to either sass or scss (or you can set that via ng set defaults.styleExt scss

As for bootstrap, place it under the public directory (I use a sub dir named style) and reference it within index.html

UPDATE: Also if you'd like to have variables files you can add the directory to angular-cli-build.js like this...

return new Angular2App(defaults, {
  vendorNpmFiles: [
    ...
  ],
  sassCompiler: {
    includePaths: [
      'src/app/style' <-- directory for SASS reference files
    ]
  }
});

Answer 2

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.

Answer 3

After Creating with

ng create "project"

go to the project directory and try with

npm install sass

it will update your package.json

Answer 4

If you create your project with the angular-cli it comes with a scss preprocessor. If you have styles files you can just change the ext to scss and ng serve will compile them for you.

When you create a project using the cli you can tell it that you want to use scss by

ng new sassy-project --style=sass

If you have an existing project Angular 2 to 5

ng set defaults.styleExt scss

If your project is Angular 6 and 7

ng config schematics.@schematics/angular:component.styleext sass

These tell the cli that when you generate new components with scss styles not css. It doesn't add a compiler or enable the compiler because there is already one there.

Any existing components would need their style file extensions renamed.

Additional documentation https://angular.io/cli

Hope this helps

Answer 5

Change these lines of angular-cli.json from

"apps": [
    {
        "styles": [
                "styles.css"
              ]
    }
]

to

"apps": [
    {
        "styles": [
                "styles.sass"
              ]
    }
]

after setting styleExt

ng set defaults.styleExt scss

Then change src/style.css to src/style.sass and ['app.component.css'] to ['app.component.sass']. It will work as expected.