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

Doing this with the current latest (beta.5) gives me an error:

Install failed. Could not find addon with name: sass

How can I go about installing bootstrap and or sass in a way that angular-cli will deal with the index page and systemJS?

Answer 1

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 2

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
    ]
  }
});