Ember QuickTips: Como dividir e importar arquivos SASS / CSS separadamente

Michael X Blocked Desbloquear Seguir Seguindo 11 de janeiro

Há momentos em que é desejável dividir suas folhas de estilo em vários arquivos e importá-los para seu projeto separadamente . Isso surgiu em um projeto paralelo que eu comecei recentemente, e eu pensei que vocês poderiam se beneficiar do que eu criei como uma solução. É um método rápido e fácil, então vamos começar ?

Quando você inicia um novo aplicativo EmberJS, percebe que o arquivo index.html importa a folha de estilo principal para o aplicativo da seguinte forma:

 <cabeça> 
...
 <link 
integridade = ""
rel = "stylesheet"
href = "{{rootURL}} assets / test-app.css"
>
 ... 
</ head>

test-app.css é compilado diretamente do seu projeto. Quando escrevemos nossos estilos personalizados em app/styles/app.css eles são colocados nesse arquivo.

Agora, e se não quisermos importar todos os nossos estilos para o aplicativo como uma única folha de estilo? Como podemos dividir nossos estilos e importar várias folhas de estilo para o aplicativo? Algo assim:

 <cabeça> 
...
 <link 
integridade = ""
rel = "stylesheet"
href = "{{rootURL}} assets / test-app.css"
>
 <link 
integridade = ""
rel = "stylesheet"
href = "{{rootURL}} assets / second-stylesheet.css"
>
 ... 
</ head>

Pode ser mais fácil do que você pensa

Primeiro Passo: Escreva estilos em SCSS / SASS e compile em CSS

Primeiro, instale um pré-processador SASS para compilar folhas de estilo SCSS / SASS em folhas de estilo CSS. Para este exemplo, usarei ember-cli-sass :

 ember install ember-cli-sass 

Agora renomeie app/styles/app.css para app/styles/app.scss . O pré-processador cuidará de processar e compilar sua folha de estilo automaticamente.

Se você executar o aplicativo, a página de boas-vindas do Ember deverá ser exibida como de costume:

Nada mudou. Isso é bom.

Comente {{welcome-page}} em app/templates/application.hbs antes de continuar. Agora temos um DOM em branco para trabalhar.

Etapa 2: criar uma nova folha de estilo

Vamos criar uma nova folha de estilos chamada app/styles/second-stylesheet.scss e adicionar os seguintes estilos:

 body { 
largura: 100vw;
altura: 100vh;
cor de fundo: vermelho;
}

Um fundo vermelho brilhante seria muito óbvio, mas quando você executa o servidor, você não vê nada além de um mar de branco. Por que é isso?

Se o seu instinto fosse importá-lo para o projeto conforme especificado acima, você estaria correto:

 <cabeça> 
...
 <link 
integridade = ""
rel = "stylesheet"
href = "{{rootURL}} assets / second-stylesheet.css"
>
 ... 
</ head>

No entanto, ainda não aparece. Por quê? ? Isso porque o pipeline de construção não foi configurado para criar esse arquivo na pasta correta ainda.

Etapa 3: configurar o Ember-CLI-Build

A etapa final é dizer ao aplicativo Ember que você tem um arquivo css para incluir em seu pipeline de construção.

Em ember-cli-build.js adicione o seguinte:

 ... 
 module.exports = function (defaults) { 
deixe app = new EmberApp (padrões, {
// Adicione opções aqui
 outputPaths: { 
aplicativo: {
css: {
'second-stylesheet': '/assets/second-stylesheet.css'
}
}
}


});
 ... 
};

É isso aí! ? Isso diz ao Ember onde exibir sua nova folha de estilo para que possa ser acessada corretamente em seu index.html ?

Um mar de vermelho. Lembre-se de reiniciar o servidor quando fizer alterações na configuração ou você não poderá ver as alterações.