`.scss`ファイルを別の` .scss`ファイルに含めますか？

Question

.scssファイルを別の.scssファイルに含めるにはどうすればよいですか？ 私はファイルでこれを書くためにしようとしていた： app.scss：

@include('buttons'); 
@include('dropzone'); 

body { 

    background: $primaryColor; 
    overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */ 
    height: 100%; /* Cover all (100%) of the container for the body with its content */ 
    padding-top: 70px; 
} /* more css code here */ 

をし、それがエラーを返します：私はメインscssファイル内の他の2つのSCSSファイルをインクルードしようinvalid css after @import

ので、最終的にすべてcssにコンパイルされます。どのように可能ですか？

Answer 1

あなたはこれを行うことにより、部分を含めることができます。

@import "partial"; 

SASSが含まれることを認識するように、インポートされたファイルは、アンダースコアが必要です

Answer 2

_partial.scssあなたはこのようにそれをインポートすることができます。

@import "../../_variables"; 

@import "../_mixins"; 

@import "_main"; 

@import "_login"; 

@import "_exception"; 

@import "_utils"; 

@import "_dashboard"; 

@import "_landing"; 

あなたのディレクトリによると、あなたが望むことができます。

Answer 3

私のapp.scssファイルがBootstrap.cssファイルと衝突しているようです。 bootstrap cssファイルの代わりにapp.scssbackgroundプロパティを適用したかったので、私は、ブートストラップのスタイルを上書きするために、このプロパティで!importantを追加しました：

body 
{ 
background: #4d94ff !important; /* Used to override Bootstrap css settings. */ 
} 

はまた、gulpfile.jsはそれに応じて自分のニーズに合った更新されました：

var elixir = require('laravel-elixir'); 


elixir(function (mix) { 
mix.sass('app.scss', 'resources/assets/css') 
.styles([ 
'app.css' 
], 'public/css/app.css'); 
mix.version([ 
    'css/app.css' 
    ]); 
}); 

をそして、それは私がそれを固定する方法です。 that.Itため