web-dev-qa-db-fra.com

Comment utiliser Less avec Angular 2?

Je voudrais savoir comment ajouter moins de compilation à mon projet Angular 2. Parce que chaque composant a son propre fichier .css (qui sera désormais un fichier .less)), je ne suis pas sûr de comment je pourrais compiler le fichier en css ...

J'ai également googlé le problème sans trouver de solution à mon problème.

EDIT Pour clarifier ma question: je voudrais avoir un .less pour chaque composant, tout comme c'est le cas par défaut avec les fichiers .css dans Angular 2. Je veux juste chaque .less à précompiler, et parce que Angular inclut le CSS en tant que script en ligne après le traitement du composant par Angular, je suppose que j'ai besoin d'un script de moins de prétraitement entre les deux, existe-t-il?

Je préfère ne pas avoir un gros fichier .less inclus dans le manuel, pour l'ensemble du projet, ce qui serait bien sûr une solution possible. Cette solution ne semble pas être en ligne avec l'environnement Angular cependant ...

lessangular
24
theva

MOINS (ou SASS) sont des préprocesseurs CSS, vous devrez donc essentiellement les compiler en CSS. Un moyen très populaire consiste à utiliser un exécuteur de tâches JavaScript basé sur Grunt , Gulp , Brunch ou Broccoli .

Voici un exemple tiré directement de la page de démarrage du brocoli.

  1. Installer le nœud npm install -g broccoli-cli
  2. Dans la racine du répertoire de votre projet, installez Broccoli npm install --save-dev broccoli
  3. Installez les plugins Broccoli SASS et fusionnez les arbres (regroupement) npm install --save-dev broccoli-sass broccoli-merge-trees
  4. Créer/modifier un fichier Brocfile.js
  5. Construisez vos actifs broccoli build dist

Exemple de fichier 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: vous pouvez facilement changer SASS pour MOINS

9
Kane

Nouveau projet

Vous pouvez utiliser le --style flag pour définir un préprocesseur CSS

ng new my-app --style less

Projet existant

  1. Si vous avez un projet existant, vous pouvez modifier .angular-cli.json fichier et définir defaults.styleExt valeur à less. Ou vous pouvez utiliser simplement utiliser: ng set defaults.styleExt less
  2. Renommez le fichier CSS d'un composant à partir de mycomp/mycomp.component.css -> mycomp/mycomp.component.less
  3. Mettre à jour styleUrls dans mycomp/mycomp.component.ts, par exemple. styleUrls: ['./mycomp.component.css'] -> styleUrls: ['./mycomp.component.less']

Ressource

28
Rust

Si vous créez une nouvelle application, juste après le nom de l'application, ajoutez --style pour choisir votre préprocesseur.

ng new my-first-app --style less

Toutes les options pour angular cli 'nouvelle' commande

18
Igor

Vous pouvez toujours utiliser un seul .css qui contient toutes les règles de style pour tous vos composants et importe les mêmes .css fichier dans chaque composant (vous devez utiliser le nom du sélecteur/tag au lieu de :Host {). Le navigateur cache le fichier de toute façon, il ne le téléchargera donc qu'une seule fois.

L'avantage de la petite portée .css les fichiers sont cependant perdus.

Je ne connais pas Less mais pour SASS je travaille actuellement sur un importateur personnalisé où les chemins d'importation peuvent être préfixés avec un identifiant/nom et l'importateur personnalisé vérifie localement si un remplacement pour cet identifiant/nom est défini et le renvoie à la place , sinon l'importation revient à la valeur par défaut.
De cette façon, le créateur de composants peut fournir des crochets de substitution où l'utilisateur peut passer ses propres variables, mixins, ... au lieu de la valeur par défaut au moment de la construction.

0
Günter Zöchbauer