Opções angulares de CLI SASS


329

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.


Respostas:


544

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

17
Em seguida, você pode alterá-lo de angular.cli.json neste arquivo: "default": {"styleExt": "css", "prefixInterfaces": false, "inline": {"style": false, "template": false} Você pode alterar o estiloExt
Mertcan Diken

145
ng set defaults.styleExt scss
quer

4
não esqueça de alterar a stylepropriedade para scssin.angular-cli.json
OST

3
ng set defaults.styleExt scss --global
JoshuaDavid

29
Para Angular 6 para definir um novo estilo de projeto existenteng config schematics.@schematics/angular:component.styleext scss
Nehalem Damania

344

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


Embora tenha gerado erros de compilador.

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"
          ],
    

3
A única coisa que me causou problemas foi que angular-cli.jsoné realmente .angular-cli.json. Depois que percebi isso, editei e isso está funcionando perfeitamente. Obrigado.
precisa saber é o seguinte

@OldTimeGuitarGuy Obrigado por apontar, o arquivo que angular-cli.jsonfoi nomeado foi alterado .angular-cli.jsonrecentemente como um arquivo oculto ( ) ( ) (rc2). Fixo.
Todos os itens são exibidos no dia 26/04

Se você estiver renomeando um .cssarquivo existente, talvez seja necessário fechá-lo e reabri-lo em seu editor para que ele reconheça adequadamente a sintaxe sass. Isso é verdade mesmo com o mais recente Visual Studio,
Simon_Weaver

1
Para o angular 6 node-sass já está instalado, não há necessidade de instalá-lo.
Destrua tudo #

1
Eu tenho a mesma configuração, mas a importação de arquivos scss diretamente para os componentes não está funcionando, enquanto a importação para o styles.scss está funcionando bem. Estou usando o angular cli verison 7+, existe algum bug?
Hemant Sankhla 16/01/19

37

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


5
pode querer adicionar --save-dev, não tenho certeza por que ele não está nos docs dessa forma, mas perdeu-a quando fizemos um upgrade e depois não conseguia descobrir por que os nossos estilos foram embora
Regnar

2
Houve um problema onde os arquivos Sass com os principais sublinhados foram também a ser compilado, mas foi fixado a partir de angular-cli 1.0.0-beta.9
Andy Ford


26

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

Estou no angularCLI v. 1.2.1 (mais recente, a partir de julho de 2017) e tenho o bug que você descreveu. eu corri esse comando, e parece funcionar perfeitamente para novos componentes por padrão, mas novos projetos ainda criar o app.component.css a menos que eu especificar--style=scss
Jeremy Moritz

21

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


3
ng setparece não funcionar nas configurações da appsmatriz. Por exemplo. ng set apps.prefix blahlança um "token inesperado b no JSON na posição 0".
im1dermike

15

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.


3
isto é, em app.component.ts para aqueles com preguiça de procurar :)
Embee

5

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 .


5

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


3

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


3

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

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

Obrigado, eu queria saber por que não funcionou e acontece que eles o renomearam para styleagora
Dino

2

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.


2

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.


1
Para quem luta contra isso após 10/03/2019: O Angular reintroduziu o suporte sass para angular-cli na 8.0.0-beta.5 e deve voltar ao ramo principal de lançamento em breve. Você pode instalar o pré-lançamento comnpm install -g @angular/cli@8.0.0-beta.5
mkrl 13/03/19

Interessante. Obrigado por lembrar. Por curiosidade, você sabe por que eles abandonam o apoio em primeiro lugar?
Apenas um aluno

Aparentemente, a equipe Angular estava se referindo a ela como sintaxe "não mais relevante", pelo menos foi o que foi declarado neste PR pelo membro da equipe principal, não conseguiu encontrar mais informações sobre isso.
Mkrl 13/03/19


0

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


0

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.


alguém já respondeu isso por angular 6 projetos existentes aqui
padigan

0

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


que é completamente fora do padrão-angular, e usando SCSS é apenas um efeito secundário de usar bulma
netalex
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.