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

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:

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 )

Renomeie seus .cssarquivos existentes para.scss (por exemplo, styles.css e app / app.component.css)
Aponte a CLI para encontrar styles.scss

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

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"       
             }  
  }

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

Em buildparte e em testparte, substitua:

"styles": ["src/styles.css"], de "styles": ["src/styles.scss"],
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

Abra este arquivo: app.component.ts
Mude este código styleUrls: ['./app.component.css']parastyleUrls: ['./app.component.scss']
Salvar e fechar.

Na mesma pasta src / app

Renomeie a extensão do arquivo app.component.css para (app.component.scss)
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.

Pesquise e substitua o css altere-o para (scss) .
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