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