Dołącz plik `.scss` do innego pliku` .scss`?

Jak mogę dołączyć plik .scss do innego pliku .scss? Starałem się napisać to w pliku: app.scss:Dołącz plik `.scss` do innego pliku` .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 */

i zwraca błąd: invalid css after @import

staram się to 2 inne SCSS plików wewnątrz głównego scss pliku, więc zostaną ostatecznie skompilowane do jednego pliku css. Jak to jest możliwe?

Źródło

2016-08-01 osherdo

Można to częściowy w ten sposób:

@import "partial";

Importowany plik wymaga podkreślenia, więc Sass rozpozna on zostać włączone: _partial.scss

Źródło

2016-08-01 23:38:05

dzięki za that.It zwraca kolejny błąd: '' 'łykać zgłasza: [laravel Elixir] Kompilacja Sass Failed: Zasoby/assets/Sass/app.scss Błąd: dyrektywa @import wymaga URL lub notowane na ścieżkę wiersz 4 stdin >> @import ("przyciski"); ^ '' ' próbował uruchomić zarówno: ' '' npm zainstalować -g łyk-Sass i zainstalować npm haustem-Sass '' ' wciąż otrzymuję ten sam błąd jak wyżej. – osherdo

i oba pliki są w tym samym katalogu? –

zaktualizowałem moją odpowiedź, sprawdziłem, czy częściowe zaczynają się od podkreślenia –

można importować go w ten sposób;

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

@import "../_mixins"; 

@import "_main"; 

@import "_login"; 

@import "_exception"; 

@import "_utils"; 

@import "_dashboard"; 

@import "_landing";

Zgodnie z twoimi katalogami i zrobi to, co chcesz.

Źródło

2016-08-02 13:38:33

Zrobiłem. Kompilacja z haustem nie powoduje żadnych błędów. Rzecz w tym, że styl nie jest w ogóle stosowany do strony. – osherdo

Musisz wstępnie skompilować swój folder sass do folderu css, a następnie dołączyć skompilowane css do swojej strony. –

OK, więc wygląda na to, że mój plik app.scss koliduje z plikiem Bootstrap.css. Ponieważ chciałem zastosować właściwość app.scssbackground zamiast pliku bootstrap css. Dodałem !important w tym obiekcie, aby zastąpić bootstrap styl .:

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

Również gulpfile.js został zaktualizowany do swoich moje potrzeby odpowiednio:

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

I tak naprawiłem go.

Źródło

2016-08-05 00:41:03 osherdo

Dołącz plik `.scss` do innego pliku` .scss`?

Odpowiedz

Powiązane problemy