自分のCSSでSassを正しくインポートするにはどうしたらいいですか？

Question

私は今、お尻を学んでいます。私はそのシンプルさに驚いていますが、私はコンパイルやインポートに問題があります。

私は自分のstyle.cssを表示しようとすると、Bootstrap Frameworkと他のサードパーティCSSのスタイリングも含まれているためです。

私は、これについていくつか考えていただけたら幸いです。

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 

あなたはstyle.scssのみインポートするためである見ることができるように。 これを手伝ってもらえますか？出力は結構ですが、私のCSSは、私は私が思う

Answer 1

SCSS/SASSをコンパイルして自分のバナー（コメント）を追加すると、サードパーティのコメントが削除されます。あなたはbootstrap's CSS fileに見ることができます。彼らは/*! */を一番上のコメントに追加しました。コンパイルすると、そのコメントが保持されます。詳しくはdocumentsをご覧ください。

したがって、サードパーティの強制的なコメントをすべて削除すると、 /*! Comment */あなたの最初のインポートに自分自身を追加すると、はるかにきれいに見えるはずです。

Answer 2

は、私はあなたの問題を理解SASSとコンパスを使用しています

:-)ブートストラップが所有しているように見えるので、私は、私は、ページのソースに表示されるものが好きではありませんこれが助けになるはずです。あなたのSassファイルに直接リソースをインポートする代わりに、cssにリンクしてみてください。例えば、ブートストラップで、ブートストラップCSSの@importsを削除し、ページヘッダーに次のようなものを入れて、あなたが使用しているバージョンに応じて：

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

これは、彼らのスタイルシートからスタイルシートを分離しますあなたはまだあなたのプロジェクトで両方を利用できるようになります。