web-dev-qa-db-fra.com

Comment compiler des fichiers less / sass dans Visual Studio 2017

Dans VS <= 2015, nous pouvons utiliser l'extension WebEssentials qui s'occupe de la compilation des fichiers less/sass, mais ne prend actuellement pas en charge VS 2017. Connaissez-vous une extension similaire qui peut compiler less/sass lors de la construction?

74
Mihail Shishkov

WebEssentials est en cours de division en plusieurs extensions. Je crois que la fonctionnalité que vous voulez est maintenant dans l’extension Web Compiler .

Si vous voulez le faire sans extensions, vous pouvez utiliser un gestionnaire de tâches comme Gulp. Voir ici pour un aperçu de la façon d'intégrer les tâches Gulp dans VS.

90
Jimmy

MISE À JOUR - VEUILLEZ LIRE CETTE PAGE, COMME J'AI AJOUTÉ UNE RÉPONSE SUPPLÉMENTAIRE (CELLE-CI NE PARAIT PLUS TRAVAILLER POUR MOI).

Pour ceux, comme moi, qui ne connaissent pas Gulp, Grunt, Shriek ou Wail et qui ne le souhaitent pas, vous POUVEZ obtenir de Visual Studio 2017 la compilation automatique de vos fichiers SCSS, comme dans Visual Studio 2015. les étapes ci-dessous ont fonctionné pour moi.

Commencez par désinstaller les anciens paquetages d'extensions/paquets Nuget pour le compilateur Web (je ne sais pas si cela est nécessaire ou non).

Accédez à la page page de téléchargement de la galerie VSIX et choisissez de télécharger le compilateur Web.

enter image description here

Notez que je l’ai fait d’abord en choisissant Outils / Extensions et mises à jour dans Visual Studio. Bien que cela ait semblé fonctionner, j'ai découvert que mes fichiers SCSS partiels n'étaient pas automatiquement compilés en CSS lorsque je les modifiais (I n'était pas le seul ).

Vous devriez maintenant pouvoir cliquer avec le bouton droit sur votre fichier SCSS principal et choisir les options indiquées ci-dessous, ce qui devrait créer automatiquement un fichier appelé compilerconfig.json dans la racine de votre projet (cette étape est probablement inutile si vous avez déjà ce fichier):

enter image description here

À partir de ce moment, tout semblait fonctionner correctement. Phew! En passant, merci à Mads Kristensen pour cette extension - de quoi éviter d'apprendre quelque chose de nouveau ...

39
Andy Brown

Réponse simple:

8
S.Serpooshan

Ma réponse précédente a fonctionné pour moi pendant quelques mois, mais maintenant ne fonctionne plus. Lorsque j'essaie de compiler, je reçois un message dans la fenêtre Erreurs à propos des problèmes liés au schéma CompilerConfig, et je ne peux pas résoudre ce problème (ni googler, ni installer/désinstaller n'a aidé).

Donc, une autre solution consiste à utiliser CompileSASS , qui est un complément beaucoup plus simple, avec beaucoup moins de documentation en ligne, mais qui fonctionne à merveille. Les seuls inconvénients que je peux voir sont:

  • la CSS générée se trouve dans le même dossier que la SCSS, il a donc fallu que je modifie quelque peu les choses sur mon site Web pour y remédier; et
  • le CSS généré est minifié seulement, autant que je peux voir

Une fois le complément installé (j'utilise VS 2017), vous pouvez accéder à Outils> Options pour modifier les paramètres:

enter image description here

En espérant que je puisse maintenant reprendre le travail! En passant, merci à tous les auteurs de compléments - ne vous inquiétez pas.

5
Andy Brown

Il existe maintenant un compilateur moins spécifique. https://github.com/madskristensen/LessCompiler

2
Justin