Melhor poderia ser ng new myApp --style=scss
O Angular CLI criará qualquer novo componente com o scss para você ...
Observe que o uso de scss
não funcionar no navegador como você provavelmente já sabe .. portanto, precisamos de algo para compilá-lo e css
, por esse motivo, podemos usá- node-sass
lo, como abaixo:
npm install node-sass --save-dev
e você deve estar pronto!
Se você estiver usando o webpack, leia aqui:
Linha de comando dentro da pasta do projeto onde está o package.json existente: npm install node-sass sass-loader raw-loader --save-dev
Em webpack.common.js
, procure "rules:" e adicione este objeto ao final da matriz de regras (não esqueça de adicionar uma vírgula ao final do objeto anterior):
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}
Então no seu componente:
@Component({
styleUrls: ['./filename.scss'],
})
Se você deseja suporte global a CSS, no componente de nível superior (provavelmente app.component.ts) remova o encapsulamento e inclua o SCSS:
import {ViewEncapsulation} from '@angular/core';
@Component({
selector: 'app',
styleUrls: ['./bootstrap.scss'],
encapsulation: ViewEncapsulation.None,
template: ``
})
class App {}
do iniciador angular aqui .