Explication détaillée de l'utilisation de vue-cli+sass

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de vue-cli+sass, et quelles sont les précautions d'utilisation de vue-cli+sass. Ce qui suit est un cas pratique, jetons un coup d'œil.

Je pense qu'il est très imprudent d'écrire directement le style dans le <style> Sans parler des divers pièges du processus d'installation de node-sass, le <style> intégré rend également les composants très déroutants. Imaginez que vous deviez faire glisser la molette de défilement sur des dizaines ou des centaines de lignes de code CSS lors de la modification d'une certaine méthode, ou que vous souhaitiez modifier un ensemble de styles, mais que vous ne trouviez pas les fichiers CSS correspondants car ils sont dispersés dans le fichier Vue. . . .

À mon avis, la bonne approche devrait être de gérer les fichiers sass séparément, puis d'introduire directement les fichiers CSS compilés dans main.js. Comme iView, ElementUI adopte tous cette approche.

Sous le dossier style se trouvent les fichiers scss classés pour faciliter la gestion et la maintenance ultérieure. Ensuite, introduisez tous les fragments de style scss dans main.scss, utilisez sass --watch main.scss:main.css La commande écoute et compile les fichiers scss en fichiers CSS. Enfin, introduisez le fichier main.css dans main.js. De cette façon, vous pouvez ajouter des classes directement aux éléments, puis écrire des styles en scss.

Bien sûr, nous ne voulons pas saisir manuellement ces commandes à chaque fois. L'idée initiale est de modifier la commande dev,

, mais cela n'obtiendra pas l'effet, car seule la commande précédente sera lancée à chaque fois. temps. J'ai donc envisagé d'utiliser le traitement par lots pour le mettre en œuvre :

Placez ces deux .bat dans le répertoire racine, puis configurez package.json :

De cette façon, vous pouvez utiliser npm run dev pour démarrer le rechargement à chaud et la surveillance sass en un seul clic.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment créer une fonction de compte à rebours avec un objet Date

Explication détaillée de l'utilisation dynamique de v -modèle en vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!