Sou novo no Angular e venho da comunidade Ember. Tentando usar o novo Angular-CLI baseado fora do Ember-CLI.

Preciso saber a melhor maneira de lidar com o SASS em um novo projeto Angular. Tentei usar o ember-cli-sassrepositório para ver se ele funcionaria, pois vários componentes principais da Angular-CLI são executados nos módulos Ember-CLI.

Não funcionou, mas, novamente, não tenho certeza se eu apenas configurou algo errado.

Além disso, qual é a melhor maneira de organizar estilos em um novo projeto Angular? Seria bom ter o arquivo sass na mesma pasta que o componente.

A Angular CLI versão 9 (usada para criar projetos do Angular 9) agora é captada pelos styleesquemas em vez de styleext. Use o comando como este:
ng config schematics.@schematics/angular:component.style scss
e o angular.json resultante será semelhante a este

"schematics": {
   "@schematics/angular:component": {
      "style": "scss"
    }
  }

Outras soluções e explicações possíveis:

Para criar um novo projeto com CLI angular com suporte sass, tente o seguinte:

ng new My_New_Project --style=scss 

Você também pode usar --style=sasse, se não souber a diferença, leia este pequeno e fácil artigo e, se ainda não souber, continue scsse continue aprendendo.

Se você possui um projeto angular 5, use este comando para atualizar a configuração do seu projeto.

ng set defaults.styleExt scss

Para as versões mais recentes

Para que o Angular 6 defina um novo estilo no projeto existente com a CLI:

ng config schematics.@schematics/angular:component.styleext scss

Ou Diretamente no angular.json:

"schematics": {
      "@schematics/angular:component": {
      "styleext": "scss"
    }
}

Atualização para Angular 6+

1. Novos projetos

   Ao gerar um novo projeto com a Angular CLI, especifique o pré-processador css como

   • Usar sintaxe SCSS

     ng new sassy-project --style=scss
     

   • Usar sintaxe SASS

     ng new sassy-project --style=sass
     

2. Atualizando projeto existente

   Defina o estilo padrão em um projeto existente executando

   • Usar sintaxe SCSS

     ng config schematics.@schematics/angular:component.styleext scss
     

   • Usar sintaxe SASS

     ng config schematics.@schematics/angular:component.styleext sass
     

   O comando acima atualizará seu arquivo da área de trabalho (angular.json) com

   "schematics": {
       "@schematics/angular:component": {
           "styleext": "scss"
       }
   } 
   

   onde styleextpode ser um scssou de sassacordo com a escolha.

Resposta original (para Angular <6)

Novos projetos

Para novos projetos, podemos definir as opções --style=sassou de --style=scssacordo com o sabor desejado SASS / SCSS

• Usar sintaxe SASS

  ng new project --style=sass 
  

• Usar sintaxe SCSS

  ng new project --style=scss 
  

então instale node-sass,

npm install node-sass --save-dev

Atualizando Projetos Existentes

Para angular-clicompilar arquivos sass node-sass, eu tive que executar,

npm install node-sass --save-dev 

que instala node-sass. Então

• para sintaxe SASS

  ng set defaults.styleExt sass
  

• para sintaxe SCSS

  ng set defaults.styleExt scss
  

para definir o styleExt padrão como sass

(ou)

alterar styleExtpara sassou scsspara a sintaxe desejada em .angular-cli.json,

• para sintaxe SASS

  "defaults": {
       "styleExt": "sass",
  }
  

• para sintaxe SCSS

  "defaults": {
       "styleExt": "scss",
  }
  

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles 

que foi corrigido alterando as linhas de .angular-cli.json,

"styles": [
        "styles.css"
      ],

para qualquer um

• para sintaxe SASS

  "styles": [
          "styles.sass"
        ],
  

• para sintaxe SCSS

  "styles": [
          "styles.scss"
        ],
  

Citado do repositório de funcionários do github aqui -

Para usar um basta instalar, por exemplo

npm install node-sass

e renomeie os arquivos .css no seu projeto para .scss ou .sass. Eles serão compilados automaticamente. O argumento de opções do Angular2App possui as opções sassCompiler, lessCompiler, stylusCompiler e compassCompiler que são passadas diretamente para seus respectivos pré-processadores CSS.

Veja aqui

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Diga ao angular-cli para sempre usar o scss por padrão

Para evitar a aprovação --style scsssempre que você gera um projeto, convém ajustar sua configuração padrão do angular-cli globalmente, com o seguinte comando:

ng set --global defaults.styleExt scss

Observe que algumas versões do angular-cli contêm um erro ao ler a flag global acima ( consulte o link ). Se sua versão contiver esse bug, gere seu projeto com:

ng new some_project_name --style=scss

Como Mertcan disse, a melhor maneira de usar o scss é criar o projeto com essa opção:

ng new My_New_Project --style=scss 

O Angular-cli também adiciona uma opção para alterar o pré-processador css padrão após a criação do projeto, usando o comando:

ng set defaults.styleExt scss

Para mais informações, você pode procurar aqui a documentação deles:

https://github.com/angular/angular-cli

Percebi uma pegadinha muito chata ao mudar para arquivos scss !!! É preciso passar de um simples: styleUrls: ['app.component.scss']para styleUrls: ['./app.component.scss'](adicionar./ ) emapp.component.ts

O que ng ocorre quando você gera um novo projeto, mas aparentemente não quando o projeto padrão é criado. Se você vir a resolver erros durante a construção do ng, verifique esse problema. Levei apenas ~ 1 hora.

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 scssnão funcionar no navegador como você provavelmente já sabe .. portanto, precisamos de algo para compilá-lo e css, por esse motivo, podemos usá- node-sasslo, 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 .

ng set --global defaults.styleExt=scssestá obsoleto desde ng6. Você receberá esta mensagem:

get / set foi descontinuado em favor do comando config

Você deveria usar:

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

Se você deseja direcionar um projeto específico (substitua {project} pelo nome do seu projeto):

ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'

Angular-CLI é o método recomendado e é o padrão na comunidade Angular 2+.

Crete um novo projeto com o SCSS

ng new My-New-Project --style=sass

Converter um projeto existente (CLI menor que v6)

ng set defaults.styleExt scss

(deve renomear todos os arquivos .css manualmente com essa abordagem, não se esqueça de renomear nos arquivos componentes)

Converter um projeto existente (CLI maior que v6)

1. renomeie todos os arquivos CSS para SCSS e atualize os componentes que os referenciam.
2. adicione o seguinte à chave "schematics" do angular.json (geralmente a linha 11):

"@schematics/angular:component": { "styleext": "sass" }

Para o Angular 9.0 e superior, atualize o "schematics":{}objeto no arquivo angular.json assim:

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}

O seguinte deve funcionar em um projeto angular da CLI 6. Ou seja, se você estiver recebendo:

get / set foi descontinuado em favor do comando config.

npm install node-sass --save-dev

Então ( certifique-se de alterar o nome do projeto )

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

Para obter o nome do projeto padrão, use:

ng config defaultProject

No entanto: se você migrou seu projeto de <6 para 6 angulares, há uma boa chance de que a configuração não esteja lá. Nesse caso, você pode obter:

Caractere JSON inválido: "s" em 0: 0

Portanto angular.json, será necessária uma edição manual de .

Você vai querer algo parecido com este (anotando a propriedade styleex):

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

Parece um esquema excessivamente complexo para mim. ¯_ (ツ) _ / ¯

Agora você terá que mudar todos os seus arquivos css / less para serem scss e atualizar todas as referências nos componentes, etc., mas você deve estar pronto.

A partir de 10/03/2019, Anguar deixou de apoiar o sass. Não importa qual opção você passou ao --styleexecutar ng new, você sempre .scssgera arquivos. É uma pena que o apoio sass tenha sido descartado sem nenhuma explicação.

Defina como Padrão Global

ng set defaults.styleExt=scss --global

Integração com pré-processador CSS O Angular CLI suporta todos os principais pré-processadores CSS:

Para usar esses pré-processadores, basta adicionar o arquivo ao styleUrls do seu componente:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

Ao gerar um novo projeto, você também pode definir qual extensão deseja para os arquivos de estilo:

ng new sassy-project --style=sass

Ou defina o estilo padrão em um projeto existente:

ng config schematics.@schematics/angular:component.styleext scss

note: @ schematics / angular é o esquema padrão da CLI angular

As seqüências de estilos adicionadas à matriz @ Component.styles devem ser escritas em CSS porque a CLI não pode aplicar um pré-processador aos estilos embutidos.

Com base na documentação angular https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Eu tentei atualizar meu projeto para usar o sass usando este comando

ng set defaults.styleExt scss

mas entendi

get / set foi descontinuado em favor do comando config.

• CLI angular: 6.0.7
• Nó: 8.9.0
• SO: linux x64
• Angular: 6.0.3

Então eu apaguei meu projeto (como estava começando e não tinha código no meu projeto) e criei um novo com o sass inicialmente definido

ng new my-sassy-app --style = scss

Mas eu apreciaria se alguém pudesse compartilhar uma maneira de atualizar o projeto existente, pois isso seria bom.

Passo 1. Instale o pacote bulma usando o npm

npm install --save bulma

Passo 2. Abra angular.json e atualize o código a seguir

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

É isso aí.

Para expor facilmente as ferramentas da Bulma, adicione stylePreprocessorOptions ao angular.json.

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

BULMA + ANGULAR 6