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.
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
Faites plutôt
Ce qui vous permettra d’avoir accès au fichier source des styles css.
Si vous utilisez compass/sass, n’oubliez pas d’activer l’option sourcemaps = true dans votre fichier config.rb
PS : Lien vers le thème de couleur du terminal disponible ici
Commentaires
Enregistrer un commentaire