Astuces Non classé

Comment lier les fichiers source des CSS avec WebPack, Angular dans les devtools

Etant un utilisateur inconditionnel de Gulp ( et Brunch, un tout petit peu) et bien que disposant qu’une grande tolérance, je dois avouer que travailler avec WebPack m’a amené à détester cordialement cet taskrunner. 
Ses fichiers de configuration sont cryptiques, il n’y a pas de livereload ‘intelligent’ (comme c’est le cas chez Gulp) et également, mais surtout, lorsqu’il est utilisé avec Angular, il y a ça qui se produit lorsqu’on inspecte le code source.
Comment lier les fichiers source des CSS avec WebPack, Angular dans les devtools, A Unix Mind In A Windows World
Au 21e siècle, ce truc se permet d’afficher les styles correspondants à une div en inline et sans aucun lien avec les fichiers d’origine. 
Autrement dit, oubliez toute idée d’utiliser Emmet LiveStyle ou l’éditeur de style des Firefox Dev Tools pour gagner du temps . 
Non, en travaillant dans cet environnement , vous devrez copier les changements effectués dans le navigateur, les copier et les coller dans votre éditeur de texte.
oh, certains d’entre vous travaillent de cette manière ?
Pardonnez mon langage, mais grand bien vous fasse … en ce qui me concerne cette façon de coder me donne envie de taper sur des gens , de préférence les concepteurs de cette purge . 
Une fois ces envies de meurtre passées,  j’ai trouvé, après plusieurs recherches, une astuce qui permet de contourner cet inconvénient.

Lors du lancement de l’application Angular, au lieu de

Comment lier les fichiers source des CSS avec WebPack, Angular dans les devtools, A Unix Mind In A Windows World

 Faites plutôt

Comment lier les fichiers source des CSS avec WebPack, Angular dans les devtools, A Unix Mind In A Windows World

Ce qui vous permettra d’avoir accès au fichier source des styles css.

Comment lier les fichiers source des CSS avec WebPack, Angular dans les devtools, A Unix Mind In A Windows World

Si vous utilisez compass/sass, n’oubliez pas d’activer l’option sourcemaps = true dans votre fichier config.rb

Jean Luc Houedanou

PS : Lien vers le thème de couleur du terminal disponible ici 

Jean-Luc Houédanou
Jean-Luc Houédanou est un blogueur spécialisé dans l'innovation et la transformation numérique, avec une expérience en développement web front-end. Après avoir obtenu un Master en gestion du commerce électronique de l'Université de Sherbrooke, il a travaillé sur des projets d'envergure mondiale pour diverses entreprises, startups et organisations internationales. Il est également impliqué dans des projets communautaires et technologiques en Afrique. Il aide, par le biais de ce blog, les lecteurs à s'adapter aux évolutions rapides de la technologie et des tendances du marché. En plus de ses articles sur l'innovation et la transformation numérique, Jean-Luc Houédanou écrit également des colonnes d'opinion et donne des conseils sur le bien-être mental. Son objectif est d'aider les lecteurs à se développer personnellement et professionnellement, en leur fournissant des conseils pratiques pour gérer le stress et améliorer leur qualité de vie.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *