22

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?

Thibs
  • 8,058
  • 13
  • 54
  • 85

5 Answers5

65

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

Woot
  • 1,759
  • 1
  • 16
  • 23
  • The readme linked to above describes installing Bootstrap which I found helpful. Where the readme talks about installing Bootstrap, it references "app[0].scripts" and "app[0].styles". It wasn't clear to me what that meant, but updating the angular-cli.json file in the 'scripts' and 'sytles' section seems to work. This answer says pretty much the same thing: [how-to-add-bootstrap-to-an-angular-cli-project](http://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project?rq=1). Look for answer by Nelly Sattari. Thanks for pointing me to the readme. – turnip_cyberveggie Dec 11 '16 at 19:55
  • 4
    or `ng new sassy-project --style=scss` if you prefer `scss` more than `sass` – new2cpp Mar 30 '17 at 14:44
  • 2
    do you know where the generated css is saved ? – Cristiano Jun 18 '17 at 01:09
  • `get/set have been deprecated in favor of the config command.` – smartmouse Sep 03 '18 at 11:48
39

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
    ]
  }
});
Brocco
  • 62,737
  • 12
  • 70
  • 76
6

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.

All Іѕ Vаиітy
  • 24,861
  • 16
  • 87
  • 111
0

After Creating with 

ng create "project"

go to the project directory and try with 

npm install sass

it will update your package.json

pd farhad
  • 6,352
  • 2
  • 28
  • 47
  • 1
    Just using `npm install sass` will just install the package into the node_modules directory but not update the package.json file. To save it to package.json, you need to use `-D` or `-save-dev` flags to save it as a dev dependency, or even `-S` or `-save` to save it as a runtime dependency. Otherwise, that package will not be installed for any new clones and is at risk of being purged via `npm purge`. – coblr Jan 04 '17 at 00:03
  • Yes, it should be "npm install sass" instead of "ng install sass". – William Hou Nov 24 '20 at 22:42
0

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.

James Eby
  • 1,784
  • 20
  • 25