Există momente în care este de dorit împărțiți-vă foile de stil în mai multe fișiere și importați-le în proiectul dvs. separat. Acest lucru a apărut într-un proiect secundar pe care l-am început recent și m-am gândit că veți putea beneficia de ceea ce am venit ca soluție. Este o metodă rapidă și ușoară, deci să începem?

Când începeți o nouă aplicație EmberJS, veți observa că index.html fișierul importă foaia de stil principală în aplicație astfel:

<head>
 ...
 <link
  integrity=""
  rel="stylesheet"
  href="https://www.freecodecamp.org/news/ember-quicktips-how-to-breakup-and-import-sass-css-files-separately-b0759459027d/{{rootURL}}assets/test-app.css"
 >
 ...
</head>

test-app.css este compilat direct din proiectul dvs. Când ne scriem stilurile personalizate în app/styles/app.css sunt introduse în acest fișier.

Acum, dacă nu dorim să importăm toate stilurile noastre în aplicație ca o singură foaie de stil? Cum putem să ne separăm stilurile și să importăm mai multe foi de stil în aplicație? Ceva de genul:

<head>
 ...
 <link
  integrity=""
  rel="stylesheet"
  href="https://www.freecodecamp.org/news/ember-quicktips-how-to-breakup-and-import-sass-css-files-separately-b0759459027d/{{rootURL}}assets/test-app.css"
 >
 <link
  integrity=""
  rel="stylesheet"
  href="https://www.freecodecamp.org/news/ember-quicktips-how-to-breakup-and-import-sass-css-files-separately-b0759459027d/{{rootURL}}assets/second-stylesheet.css"
 >
...
</head>

Poate fi mai ușor decât crezi?

Primul pas: scrieți stiluri în SCSS / SASS și compilați în CSS

Mai întâi, instalați un preprocesor SASS pentru a compila foi de stil SCSS / SASS în foi de stil CSS. Pentru acest exemplu voi folosi ember-cli-sass:

ad-banner
ember install ember-cli-sass

Acum redenumiți app/styles/app.css la app/styles/app.scss. Preprocesorul se va ocupa de procesarea și compilarea automată a foii de stil.

Dacă rulați aplicația, pagina de întâmpinare Ember ar trebui să fie afișată ca de obicei:

Sfaturi rapide Ember Cum sa separati si sa importati fisiere
Nimic nu a fost schimbat. Asta e bine.

Comentează {{welcome-page}} în app/templates/application.hbs înainte de a continua. Acum avem un DOM gol cu ​​care să lucrăm.

Pasul doi: Creați o nouă foaie de stil

Să creăm o nouă foaie de stil numită app/styles/second-stylesheet.scss și adăugați următoarele stiluri:

body {
 width: 100vw;
 height: 100vh;
 background-color: red;
}

Un fundal roșu strălucitor ar fi foarte evident, totuși, atunci când rulați serverul, nu vedeți altceva decât o mare de alb. De ce asta?

Dacă instinctul tău ar fi să-l importi în proiect așa cum s-a specificat mai sus, ai fi corect:

<head>
 ...
 <link
  integrity=""
  rel="stylesheet"
  href="https://www.freecodecamp.org/news/ember-quicktips-how-to-breakup-and-import-sass-css-files-separately-b0759459027d/{{rootURL}}assets/second-stylesheet.css"
 >
...
</head>

Cu toate acestea, încă nu apare. De ce? ? Acest lucru se datorează faptului că conducta de construire nu a fost încă configurată pentru a construi acest fișier în folderul corect încă.

Pasul trei: configurați Ember-CLI-Build

Ultimul pas este să spuneți aplicației Ember că aveți un css fișier pentru a include în conducta sa de construire.

În ember-cli-build.js adăugați următoarele:

...
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    outputPaths: {
      app: {
        css: {
          'second-stylesheet': '/assets/second-stylesheet.css'
        }
      }
    }
    
  });
  ...
};

Asta e! ? Acest lucru îi spune Ember unde să afișeze noua dvs. foaie de stil, astfel încât să poată fi accesată corect în index.html ?

1611263705 811 Sfaturi rapide Ember Cum sa separati si sa importati fisiere
O mare de roșu. Nu uitați să reporniți serverul când efectuați modificări de configurare sau este posibil să nu vedeți modificările.