angular-cli how to add sass and or bootstrap?

ng config scss
angular 7 scss
angular bootstrap/scss
angular 7 change css to scss
angular material scss
add bootstrap to angular
add bootstrap scss to angular 9
angular sass-loader

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?


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

Add Bootstrap 4 with its SASS files in an Angular 5 project, is an easy matter. If you've already created your Angular CLI app with the… How to create Angular 7 application with SCSS style files. Converting existing  It is easy to add and can be customized with our own CSS/SASS styles. Using the Angular CLI(version 6+) ng add command will update your Angular project with the correct dependencies, perform


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

Configuring Angular 7 project with SASS, bootstrap, and Angular , Create a new Angular CLI project with the SASS style option: ng new Install the SASS version of the Bootstrap project with: npm install  Stage 2: Add Angular CLI. Angular CLI is a great tool to create and work with Angular. It does not have to be used, but I would recommend it. Angular CLI allows you to write clean code using the best practices described in the Angular documentation. For more detailed information read its official documentation, or official Angular website.


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.

Use Bootstrap SASS with Angular CLI, How do I add SCSS to an existing angular project? In the Angular CLI, all components are self-contained and so are their Sass files. In order to use a variable from within a component's Sass file, you'll need to import the _variables.scss file. One way to do this is to @import with a relative path from the component. This may not scale if you have many nested folders or eventually move files


After Creating with

ng create "project"

go to the project directory and try with

npm install sass

it will update your package.json

Quick Tip : How to use SCSS in Angular CLI 6 - Vissanu.S, components styles have a useful CSS encapsulation mechanism that ensures any component CSS is local to the component and does not globally alter any styles. I am trying to set up using the Bootstrap 4 scss file in my Angular 4 CLI project. Following the guidelines here and here, I have set up angular-cli.json like so (designsystem.scss is my main scss


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.

Sass and CSS Import Performance in Angular, scss files. Adding Bootstrap CSS File. Now that we have Bootstrap, let's look at how we can include the basic CSS file. In the Angular project open styles.scss and add a reference the bootstrap.scss file. Note: With Sass, the file extension isn't necessary when declaring a reference. Alternatively, .scss files can be added in the angular-cli.json styles array. However, it's common practice to structure Sass using a single entry point, or manifest-like file.


Using Sass with the Angular CLI ― Scotch.io, Angular CLI also asks you to choose stylesheet format from Sass, Less, Stylus, SCSS and CSS. cd my-angular-app. Add Bootstrap 4 in Angular 9  Adding Bootstrap 4 to Angular 9. Thanks to the new ng add command added on Angular 7+, you have a new simpler and easier way to add Bootstrap without using the npm install command for installing the required dependencies or adding any configurations. You can simply run the following command to add ng-bootstrap: $


Setup New Angular 9 Project from Scratch using Latest Angular CLI , When working with the Angular CLI, the default stylesheets have the .css Now, install the bootstrap-sass library, which is the SASS version of  Not able to build when I add bootstrap.css (or scss) to angular-cli.json #9132


Angular Sass Example, an Angular project. This guide will walk you through adding bootstrap to your Angular CLI project and configuring it to use bootstrap. If you are using bootstrap-sass , add the following to _variables.scss : $icon-font-path: '. I'm trying to use CLI and I need my project to use Bootstrap 4 alpha. I managed to get its .js files and dependencies but I don't understand how to use bootstrap's sass files (how to integrate bootstrap styles based on its sass).