Best could be ng new myApp --style=scss
Then Angular CLI will create any new component with scss for you...
Note that using scss not working in the browser as you probably know.. so we need something to compile it to css, for this reason we can use node-sass, install it like below:
npm install node-sass --save-dev
and you should be good to go!
If you using webpack, read on here:
Command line inside project folder where your existing package.json
is: npm install node-sass sass-loader raw-loader --save-dev
In webpack.common.js, search for "rules:" and add this object to the
end of the rules array (don't forget to add a comma to the end of the
previous object):
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}
Then in your component:
@Component({
styleUrls: ['./filename.scss'],
})
If you want global CSS support then on the top level component (likely
app.component.ts) remove encapsulation and include the SCSS:
import {ViewEncapsulation} from '@angular/core';
@Component({
selector: 'app',
styleUrls: ['./bootstrap.scss'],
encapsulation: ViewEncapsulation.None,
template: ``
})
class App {}
from Angular starter here.
