Fondation 5 Configuration personnalisée du projet sass

Question

J'ai un projet avec lequel j'aimerais utiliser Foundation 5. J'ai été à travers les étapes de la création d'un nouveau projet de fondation en utilisant la CLI mais je ne l'aime pas. Il y a trop de fichiers et la structure ne correspond pas à ce que je veux. Donc ...

J'ai l'intention d'ajouter seulement les fichiers requis à mon projet et utiliser la boussole pour compiler tout le CSS.

J'ai remarqué dans le projet créé sur la CLI quelques petites choses qui me dérangent et que je voudrais de l'aide pour les résoudre.

• Dans le projet créé sur la CLI, il y a deux fichiers _settings.scss un dans le répertoire de fondation en bower_components et un en MY_PROJECT\scss. Je suppose qu'en raison de cette ligne add_import_path "bower_components/foundation/scss" dans le config.rb, lequel de ces fichiers a la préférence?

• Pourquoi MY_PROJECT/stylesheets n'a-t-il pas normalize.css (ou foundation.css) dedans? Et comment ne sont-ils pas là? (Dans ma configuration personnalisée, ils sont générés, mais dans les sous-répertoires de stylesheets, aussi le foundation.css qui est généré pour moi n'a pas les changements de paramètres appliqués donc je suppose qu'il ne doit pas être générée)

Answer 1

Si vous jetez un oeil à l'intérieur \bower_components\foundation\scss vous verrez le fichier foundation.scss. Ce fichier importe toutes les feuilles de style pour tous les composants supplémentaires qui viennent dans le "paquet" Foundation 5 ". Dans votre répertoire scss racine, le app.scss est ce qui compile le SASS en \stylesheets\app.css. Donc plutôt que ceci:

@import "foundation"; 

Décommentez les composants individuels que vous utiliserez. Quelque chose comme ceci:

@import 
    //"foundation/components/accordion", 
    //"foundation/components/alert-boxes", 
    "foundation/components/block-grid", 
    //"foundation/components/breadcrumbs", 
    //"foundation/components/button-groups", 
    //"foundation/components/buttons", 
    "foundation/components/clearing", 
    "foundation/components/dropdown", 
    //"foundation/components/dropdown-buttons", 
    //"foundation/components/flex-video", 
    "foundation/components/forms", 
    "foundation/components/grid", 
    //"foundation/components/inline-lists", 
    //"foundation/components/joyride", 
    //"foundation/components/keystrokes", 
    //"foundation/components/labels", 
    //"foundation/components/magellan", 
    //"foundation/components/orbit", 
    //"foundation/components/pagination", 
    //"foundation/components/panels", 
    //"foundation/components/pricing-tables", 
    //"foundation/components/progress-bars", 
    "foundation/components/reveal", 
    "foundation/components/side-nav", 
    //"foundation/components/split-buttons", 
    "foundation/components/sub-nav", 
    //"foundation/components/switches", 
    "foundation/components/tables", 
    //"foundation/components/tabs", 
    //"foundation/components/thumbs", 
    //"foundation/components/tooltips", 
    "foundation/components/top-bar", 
    "foundation/components/type", 
    "foundation/components/offcanvas", 
    "foundation/components/visibility"; 

Si vous souhaitez simplifier la structure de votre dossier, je vous suggère de supprimer tous les fichiers du répertoire SCSS \bower_components\foundation\scss\foundation\components que vous ne pourrez pas utiliser. Pareil avec le répertoire js. Vous n'avez en fait besoin de rien modifier dans le répertoire bower_components pour que tout fonctionne. Je ne sais pas exactement pourquoi tout cela est contenu dans bower_components, mais j'imagine que cela a quelque chose à voir avec la possibilité de mettre à jour les composants de base plus tard avec les futures versions.

Quelqu'un d'autre pourrait probablement donner une réponse plus instruite.

p.s. - Assurez-vous de compass watch dans votre CLI pour voir l'une de ces modifications apportées à vos fichiers SASS.