Angular-cli de css para scss

135

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'(…)
Jamie
fonte
1
Isso funcionará apenas para arquivos que você gerar a partir desse ponto, acho que não irá corrigir os que você já possui. Se você git diffvai ver o que mudou.
precisa saber é o seguinte
Mas ainda não tenho arquivos. Só quero mudar.
Jamie
como você não tem arquivos ainda? Se você está criando um novo projeto, por que está configurando dessa maneira?
precisa saber é o seguinte
Apenas começando com angular2. Estou tentando descobrir tudo.
Jamie
1
Se você estiver criando um novo projeto, faça ng new whatever --style=scss como mostrado nos documentos . Não siga as instruções para configurar um projeto existente, se não é isso que você está fazendo!
precisa saber é o seguinte

Respostas:

267

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 )

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

  2. Aponte a CLI para encontrar styles.scss

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

  1. 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
Chique
fonte
6
Edição: Eu só precisava atualizar o construtor em tempo real. Funciona corretamente #
Cristian Traìna
1
@ angular / cli 1.7.3: alterar defaults.styleExt de csspara scssin .angular-cli.jsoncriará automaticamente arquivos scss para cada novo componente gerado no futuro.
SimonHawesome
4
sc set defaults.styleExt para projetos existentes
smedasn
9
para angular 6 siga este github.com/angular/angular-cli/wiki/stories-css-preprocessors
hamilton.lima
22
@chovy para a mais recente versão cli angular, no meu caso (6.0.7) Utilize este comando para projetos existentes: ng config schematics.@schematics/angular:component.styleext scss como dito por @ hamilton.lima
Farhan
52

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"
  }
}
Jose Orihuela
fonte
Eu schematicsnão tenho no nível raiz, mas aninhei dentro do meu projeto em angular.json. Devo ignorar isso e adicionar isso no nível raiz?
Mcheah 16/0518
1
@cheah, sim, é assim que o meu também está configurado e está funcionando.
Eric Soyke
Deixei o meu aninhado dentro do projeto e parece que também está funcionando bem, como um FYI para quem tem a mesma pergunta.
Mcheah
Depois de atualizar para as versões mais recentes do ng6, o meu schematicsagora também está aninhado.
Jose Orihuela
Isso não parece mudar nada para mim. Ainda não processando regras scss em arquivos .css.
chovy
34

Abrir arquivo angular.json

1. mude de

"schematics": {}

para

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }
  1. 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

BALA
fonte
4
Passo 1 pode ser feito a partir da CLI: ng config schematics.@schematics/angular:component.styleext scss conforme especificado na documentação oficial: github.com/angular/angular-cli/wiki/stories-css-preprocessors
Marian07
13

Para Angular 6,

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

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

Franklin Pious
fonte
11

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

Angel Roma
fonte
1
Invalid JSON character: "s" at 0:0.
chovy
A partir de Angular CLI 6.0.8 ng config(como acima) é o melhor método, mas você ainda precisa renomear *.cssarquivos para *.scsse substituir referências no angular.jsonpara style.csscom style.scsse atualizar todas as referências de arquivos componentes em styleUrlspropriedade para os novos nomes. ... então funciona muito bem!
GKL
8

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

veben
fonte
6

Use o comando:

ng config schematics.@schematics/angular:component.styleext scss
himanshu sharma
fonte
3

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

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'
Jameson Saunders
fonte
3

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

tilo
fonte
Brilhante, estava procurando por isso. Obrigado!
Ruan Petersen
2

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.

Frank Thoeny
fonte
1

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
Partha Ranjan
fonte
não está funcionando para mim e eu estou tentando fazê-lo mais de 10
Kross