web-dev-qa-db-ja.com

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

含める方法.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 */

エラーを返します：invalid css after @import

メインのscssファイル内に他の2つのscssファイルを含めるようにしているので、最終的にはすべて1つのcssファイルにコンパイルされます。どうして可能ですか？

sassscss-lint
22
osherdo

このようにインポートできます。

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

@import "../_mixins";

@import "_main";

@import "_login";

@import "_exception";

@import "_utils";

@import "_dashboard";

@import "_landing";

あなたのディレクトリによると、それはあなたが望むことをします。

20
Mertcan Diken

これを行うことでパーシャルを含めることができます：

@import "partial";

インポートされたファイルにはアンダースコアが必要なので、sassはそれが含まれていることを認識します：_partial.scss

6
Wim Mertens

わかりましたので、私のapp.scssファイルはBootstrap.cssファイルと衝突します。 app.scssbackgroundプロパティは、bootstrap cssファイルの代わりに適用します。!importantこのプロパティでbootstrapスタイルをオーバーライドします。

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'
    ]);
 });

そして、それが私がそれを修正した方法です。

0
osherdo