La bonne façon d'ouvrir vue-cli + sass

Cet article vous présente principalement la bonne façon d'ouvrir vue-cli + sass. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

Concernant comment configurer sass dans un projet construit avec vue-cli, les réponses trouvées sur Internet sont essentiellement les suivantes :

Mais je pensez, il est très imprudent d'écrire directement le style dans le Sans parler des divers pièges du processus d'installation de node-sass, le 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.

Si vous êtes d'accord et envisagez d'adopter cette approche, regardez l'exemple spécifique suivant :

La structure du projet est telle qu'indiquée ci-dessus, sous le dossier de style Il s'agit d'un fichier scss classé pour faciliter la gestion et la maintenance ultérieure. Ensuite, introduisez tous les fragments de style scss dans main.scss, utilisez la commande sass --watch main.scss:main.css pour surveiller et compiler le fichier scss dans un fichier 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 ces commandes manuellement à chaque fois. L'idée initiale est de modifier la commande dev :

Mais cela n'obtient pas l'effet, car seule la commande précédente sera lancée à chaque fois. J'ai donc envisagé d'utiliser le traitement par lots pour l'implémenter :

Mettez 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.

Recommandations associées :

Exemples détaillés de configuration de webpack optimisée vue-cli

Exemples détaillés de configuration vscode vue-cli eslint

vue-cli crée rapidement des applications vue et implémente une explication détaillée de l'emballage Webpack