Comment puis-je importer correctement Sass sur mon propre CSS?

Question

J'apprends sass maintenant et je suis étonné par sa simplicité mais j'ai un problème dans la compilation ou l'importation. Parce que si j'essaie de voir mon style.css, il contient également le style de la Bootstrap Framework et aussi les autres css de tierce partie.

Voici ma configuration espère que vous pouvez me donner une idée à ce sujet.

styles.scss

// Import Bootstrap Compass integration 
@import "bootstrap-compass"; 

// Import custom Bootstrap variables 
@import "bootstrap-variables"; 

// Import Bootstrap for Sass 
@import "bootstrap"; 

// Import Font Awesome 
@import "font-awesome-compass"; 
@import "font-awesome"; 

// sass breakpoint 
@import "../assets/bower_components/breakpoint-sass/stylesheets/_breakpoint.scss"; 

mystyles.scss

@import 'styles'; 
@import 'mystyles-mixins'; 
@import 'mystyles-variables'; 

.... my styles below 

Comme vous pouvez le voir le style.scss est pour l'importation seulement. Pouvez-vous m'aider avec ça? La sortie est bien, mais je n'aime pas ce que je vois sur la source de la page, car il ressemble à mon css appartient bootstrap :-)

J'utilise la boussole avec SASS

Answer 1

Je supprime les commentaires de tiers lorsque je compile mon SCSS/SASS et que j'ajoute ma propre bannière (commentaires). Vous pouvez voir sur bootstrap's CSS file ils ont ajouté /*! */ au premier commentaire. Ce qui signifie que lorsque vous compilez, il conserve ce commentaire. Vous pouvez lire plus à ce sujet sur le documents. Donc, si vous supprimez tous les commentaires forcés de tiers, par exemple. /*! Comment */ et ajouter votre propre à votre première importation, il devrait être beaucoup plus propre.

Answer 2

Je pense que je comprends votre question , et cela devrait aider. Essayez de lier le CSS au lieu d'importer les ressources directement dans vos fichiers sass. Par exemple, avec amorçage, retirez les @imports pour css d'amorçage et de mettre quelque chose de semblable à ce qui suit dans votre tête de page, selon la version que vous utilisez:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

Cela séparera vos feuilles de style de leurs feuilles de style, mais vous aurez toujours les deux disponibles à utiliser dans votre projet.