Javascript Girl
  1. Javascript Girl
  3. Gestion CSS avec l'Aurelia-CLI: chaque vue charge un autre fichier CSS pour être forcé sur le site, causant des conflits
Intereting Posts
Comment puis-je extraire la diffusion de CCTV DVR pour une application personnalisée? Appel de la méthode java server side using jquery Est-ce que vous pouvez "strass" les chaînes de modèles ES6 à des chaînes normales? Mode valide pour ajouter noscript dans la tête pour l'emballage de la redirection En utilisant la case à cocher comme bouton radio Javascript __proto__ – clarification? La fonction jQuery n'exécute pas dans la boucle PHP foreach SetTimeout sur la méthode de l'objet – ES5 bind ou fermeture? Problèmes liés à une classe appelée «a: active» à l'aide de jQuery Faites pivoter le symbole SVG pour faire correspondre l'en-tête de l'avion à l'aide de l'API Google Maps L'objet d'erreur JS n'a pas de méthode addEventListener Angularjs: appelez un autre champ qui, dans iframe Jquery UI draggable ne redimensionne pas les autres DIV Validation des codes postaux au Royaume-Uni en utilisant des expressions régulières Ng-click ne fonctionne pas dans un contenu créé dynamiquement

Gestion CSS avec l'Aurelia-CLI: chaque vue charge un autre fichier CSS pour être forcé sur le site, causant des conflits

J'ai un projet avec 6 vues (html). Chacune de ces vues a un modèle de vue correspondant (.js) et une feuille de style juste pour cette vue (.css)

L'aurelia-cli fait un travail merveilleux de recourir à mon fichier gratuitement et de regrouper tous les fichiers .js et .cs dans quelques fichiers afin qu'ils puissent être référencés tout en réduisant les temps de chargement et la taille des pages. Donc, si j'ai un dossier de bienvenue avec welcome.html, welcome.js et welcome.css, je peux charger le CSS pour welcome.html avec le <require from="./welcome.css"></require> et Le CSS sera injecté dans les balises <head></head> sur le chargement de la page.

Le problème est que lorsque je navigue vers la prochaine vue, les règles CSS de welcome.html / welcome.css sont encore dans la <head> de la page Web, ce qui est toujours appliqué. Après avoir visité toutes les 6 vues dans ma application, j'ai maintenant 6 balises <style> dans la <head> avec toutes les règles des six pages appliquées sur chaque page que je vais sans déchargement jusqu'à ce que la page soit actualisée. Inutile de dire qu'après avoir visité quelques pages, le site entier se confond les ordures.

Donc, mes questions sont

  1. Pourquoi est-ce une caractéristique
  2. Est-ce que j'ai manqué une meilleure pratique ici?
  3. Existe-t-il un moyen de charger le css pour une page lors de la visite, de le décharger lors de la navigation, et de charger les nouvelles pages css dans sa place?

Si j'avais une application de 10 pages avec une feuille de style globale, bootstrap, animé css et police impressionnante, à la fin de la journée j'ai 14 styles contradictoires injectés en permanence dans le html dans lequel le reste de l'application est injecté.

Aucune suggestion? Merci pour la lecture.

Après avoir fait face à des situations similaires, en expérimentant pendant de longues heures, je suis arrivé à une conclusion simple: je n'aime pas cette approche «injecter des fichiers CSS partout». Permettez-moi un peu de problème, s'il vous plaît. 🙂

Quel est l'avantage de cela?

  • Nous avons déjà créé une feuille de style globale combinée avec des choses habituelles (bootstrap, font-awesome, etc.). On peut supposer que c'est dans la section tête de index.html . Bien sûr, car nous aimerions avoir un bon éclaboussement avant que l'application ne se charge elle-même. Même dans l'application officielle de navigation de squelette
  • Une autre raison d'éviter <require> est sa nature asynchrone, ce qui nous donne peu ou pas de contrôle sur l' ordre de chargement CSS . C'est parfait pour les modules JS / éléments personnalisés, mais pas pour plusieurs fichiers CSS.
  • Et enfin, ces autres étiquettes <require> placées dans chaque vue, juste pour rendre notre situation déjà «simple» encore plus «simple».

Alors, ne serait-il pas plus facile d'emballer le reste des feuilles de style de l'application dans cette feuille de style globale déjà existante, dans un ordre explicite?

Ma proposition

Aurelia-cli a une fonctionnalité exceptionnelle, appelée générateurs . Vous pouvez étendre ses fonctionnalités, comme vous le souhaitez. Dans cet esprit, vous pouvez créer de nouvelles tâches pour le pré-traitement après traitement CSS et les insérer dans le processus de construction.

  • Vous avez un contrôle total sur le processus.
  • Un fichier minifié sera créé. Il contiendra tout dans l'ordre de chargement CSS attendu.
  • La taille d'un fichier CSS d'une petite application est comme ~ 10-30KB, n'est-ce pas? Cela ne nuira pas. 🙂

J'ai créé un petit projet il y a plusieurs jours, qui traite également de ce problème: aurelia-custom-skeleton . Démonstration de travail ici .

  1. Au cours du processus de construction, il crée une base.css partir de dépôts mondiaux et une app.css de fichiers CSS personnalisés. Ceci est à des fins de débogage.
  2. Ces deux fichiers sont combinés dans styles.min.css , qui est déployé et référencé dans index.html .
  3. Si vous devez créer une application vraiment auto-exécutable, sans fichiers externes, vous avez toujours la possibilité d'intégrer cette 1 feuille de style combinée.