Come aggiungere stili LESS / CSS globali ad Angular con webpack

Blog

Come aggiungere stili LESS / CSS globali ad Angular con webpack

L'angolare ci consente di aggiungere gli stili specifici del componente nei singoli componenti, che sovrascriveranno il globale stili.In questo articolo, ti mostreremo come aggiungere un foglio di stile LESS / CSS globale alla tua applicazione Angular con Webpack.



Installa i caricatori di webpack

Eseguire il comando seguente per installare i pacchetti npm necessari per convertire gli stili LESS in CSS, quindi caricare gli stili CSS e inserirli nel DOM.

npm i --save-dev css-loader less less-loader style-loader

Crea un foglio di stile LESS / CSS globale

Crea un foglio di stile LESS chiamato app.less insieme al componente radice dell'app Angular |_+_|) con alcuni stili semplici per i test, ad esempio:



(/src/app/app.component.ts

Aggiungi le regole del modulo alla configurazione del webpack

Aggiorna il tuo |_+_| con le seguenti regole del modulo in modo che webpack sappia come elaborare |_+_| File.

body { background-color: #1abc9c; }

Questo è il file di configurazione completo del webpack di cui sopra applicazione di esempio dopo che i caricatori di stile sono stati aggiunti:



webpack.config

Importa il foglio di stile globale nel componente dell'app Angular

Importa il |_+_| foglio di stile globale nel componente radice dell'app Angular (|_+_|) con la riga seguente.

*.less

Questo è il completo |_+_| file dall'alto applicazione di esempio dopo che il foglio di stile globale è stato importato:

{ test: /.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' } ] }

Grazie per aver letto

Questo è il titolo dell'immagine

#angular #css #webpack