Come utilizzare Less with Angular 2?

Question

Mi piacerebbe sapere come aggiungere una minore compilazione al mio progetto Angular 2. Poiché ogni componente ha il proprio file .css (che ora sarà un file .less) non sono sicuro su come posso compilare il file in css ...

Ho anche cercato su Google il problema senza trovare alcuna soluzione al mio problema

EDIT per rendere la mia domanda più chiaro: Vorrei avere uno .less per ogni componente, così come è di default con i file css in angolare 2. I Just Wanna ogni .less ad essere precompilate e poiché Angular sta includendo il css come script inline dopo che il componente è stato elaborato da Angular, immagino di aver bisogno di uno script di meno pre-elaborazione in mezzo, esiste?

Preferirei non avere un grande file .less incluso nel manuale, per l'intero progetto, che ovviamente sarebbe una possibile soluzione. Questa soluzione sembra non essere in linea con l'ambiente Angular però ...

Answer 1

LESS (o SASS) sono preprocessori CSS, quindi sarà necessario compilarli essenzialmente in CSS. Un modo molto diffuso è quello di utilizzare un programma di attività JavaScript come Grunt, Gulp, Brunch o Broccoli.

Ecco uno example preso direttamente dalla pagina iniziale di Broccoli.

1. Installare nodo npm install -g broccoli-cli
2. All'interno del progetto directory root, installare Broccoli npm install --save-dev broccoli
3. Installare la Broccoli SASS e unire alberi (bundling) plugin npm install --save-dev broccoli-sass broccoli-merge-trees
4. Crea/Modifica un file Brocfile.js
5. Crea il tuo patrimonio broccoli build dist

Esempio il file Brocfile.js

/* Brocfile.js */ 

// Import some Broccoli plugins 
var compileSass = require('broccoli-sass'); 
var mergeTrees = require('broccoli-merge-trees'); 

// Specify the Sass and Coffeescript directories 
var sassDir = 'app/scss'; 

// Tell Broccoli how we want the assets to be compiled 
var styles = compileSass([sassDir], 'app.scss', 'app.css'); 

// Merge the compiled styles and scripts into one output directory. 
module.exports = mergeTrees([styles, scripts]);enter code here 

BTW: È possibile passare facilmente SASS per meno

Answer 2

È comunque possibile utilizzare un unico .css che contiene tutte le regole di stile per tutti i componenti e importare lo stesso file .css in ogni sua componente (devi usare il nome del selettore/tag invece di :host {). Il browser memorizza il file in ogni caso, quindi lo scaricherà solo una volta.

Tuttavia, il vantaggio di piccoli file con ambito .css viene perso.

Non so Meno ma per SASS Attualmente sto lavorando a un importatore personalizzato in cui i percorsi di importazione possono essere preceduti da un id/nome e l'importatore personalizzato controlla localmente se è definito un override per quell'id/nome e restituisce questo, altrimenti l'importazione torna al valore predefinito.
In questo modo, il creatore di componenti può fornire hook di override in cui l'utente può passare le proprie variabili, mixins, ... invece del valore predefinito al momento della compilazione.

Answer 3

Se si sta creando una nuova app, subito dopo il nome dell'app aggiungere --style per scegliere il preprocessore.

ng new my-first-app --style less 

All options for angular cli 'new' command

Answer 4

Nuovo progetto

È possibile utilizzare il flag --style per impostare un preprocessore CSS

ng new my-app --style less 

progetto esistente

1. Se si dispone di un progetto esistente, è possibile modificare il file .angular-cli.json e impostare il valore defaults.styleExt su less. Oppure si può utilizzare semplicemente utilizzare: ng set defaults.styleExt less
2. Rinominare file CSS di un componente da mycomp/mycomp.component.css ->mycomp/mycomp.component.less
3. Aggiornamento styleUrls in mycomp/mycomp.component.ts, per esempio styleUrls: ['./mycomp.component.css'] ->styleUrls: ['./mycomp.component.less']

Resource