Angular-cli de css para scss

Eu li a documentação , que diz que, se eu quiser usar scss, tenho que executar o seguinte comando:

ng set defaults.styleExt scss

Mas quando faço isso e faço esse arquivo, ainda recebo este erro no meu console:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

Para Angular 6, verifique o documentação oficial

Nota: Para @angular/cliversões anteriores ao 6.0.0-beta.6usong set no lugar de ng config.

Para projetos existentes

Em um projeto angular-cli existente configurado com os cssestilos padrão, você precisará fazer algumas coisas:

1. Altere a extensão de estilo padrão para scss

Altere manualmente .angular-cli.json(Angular 5.x e anterior) ou angular.json(Angular 6+) ou execute:

ng config defaults.styleExt=scss

se você receber um erro: Value cannot be found.use o comando:

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

(* fonte: opções Angular CLI SASS )

2. Renomeie seus .cssarquivos existentes para.scss (por exemplo, styles.css e app / app.component.css)

3. Aponte a CLI para encontrar styles.scss

Altere manualmente as extensões de arquivo apps[0].stylesemangular.json

4. Aponte os componentes para encontrar seus novos arquivos de estilo

Altere o styleUrlsem seus componentes para corresponder aos seus novos nomes de arquivo

Para projetos futuros

Como o @Serginho mencionou, você pode definir a extensão do estilo ao executar o ng newcomando

ng new your-project-name --style=scss

Se você deseja definir o padrão para todos os projetos criados no futuro, execute o seguinte comando:

ng config --global defaults.styleExt=scss

A partir do ng6, isso pode ser realizado com o seguinte código adicionado angular.jsonno nível raiz:

Alterar manualmente em .angular.json:

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

Abrir arquivo angular.json

1. mude de

"schematics": {}

para

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

2. mudar de (em dois lugares)

"src/styles.css"

para

"src/styles.scss"

verifique e renomeie todos os .cssarquivos e atualize os arquivos component.ts styleUrls de.css to .scss

Para Angular 6,

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

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

Integração de pré-processador CSS para CLI Angular: 6.0.3

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

Documentação angular da CLI para todos os principais pré-processadores CSS

Para projetos existentes :

No angular.jsonarquivo

1. Em buildparte e em testparte, substitua:

   "styles": ["src/styles.css"], de "styles": ["src/styles.scss"],

2. Substituir:

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

Usar o ng config schematics.@schematics/angular:component.styleext scsscomando funciona, mas não coloca a configuração no mesmo local.

No seu projeto, renomeie seus .cssarquivos para.scss

Para um novo projeto , este comando faz todo o trabalho:

ng n project-name --style=scss

Para configuração global

Novas versões parecem não ter um comando global

Use o comando:

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

No ng6, você precisa usar este comando, de acordo com um post semelhante :

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

Para usuários das extensões Nrwl que se deparam com este segmento: todos os comandos são interceptados pelo Nx (por exemplo,ng generate component myCompent ) e depois transmitidos para o AngularCLI.

O comando para fazer o SCSS funcionar em um espaço de trabalho do Nx:

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

Uma mudança de força bruta pode ser aplicada. Isso funcionará para mudar, mas é um processo mais longo.

Vá para a pasta do aplicativo src / app

1. Abra este arquivo: app.component.ts

2. Mude este código styleUrls: ['./app.component.css']parastyleUrls: ['./app.component.scss']

3. Salvar e fechar.

Na mesma pasta src / app

1. Renomeie a extensão do arquivo app.component.css para (app.component.scss)

2. Siga esta alteração para todos os outros componentes. (por exemplo, casa, sobre, contato etc.)

O arquivo de configuração angular.json é o próximo. Está localizado na raiz do projeto.

1. Pesquise e substitua o css altere-o para (scss) .

2. Salvar e fechar.

Por fim, reinicie o seu ng serve -o.

Se o compilador reclamar com você, repita as etapas novamente.

Certifique-se de seguir as etapas no app / src de perto.

Na versão mais recente do Angular (v9), o código abaixo precisa adicionar angular.json

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

Pode ser adicionado usando o seguinte comando:

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