2016-08-01 36 views
8

Wie kann ich die .scss Datei in eine andere .scss Datei aufnehmen? Ich habe versucht, diese in einer Datei zu schreiben: app.scss:".scss" -Datei in eine andere `.scss'-Datei aufnehmen?

@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 */ 

und es gibt einen Fehler zurück: invalid css after @import

I 2 andere SCSS Dateien innerhalb der Haupt scss Datei, so dass es zu schließen versuchen wird schließlich zu einer css Datei kompiliert. Wie ist es möglich?

Antwort

3

Sie können einen Teil umfassen, indem Sie diese:

@import "partial"; 

Die importierte Datei einen Unterstrich muss, so sass sie werden erkennen, subsumieren: _partial.scss

+0

Dank für that.It gibt einen anderen Fehler: '' 'schlucke-notify: [Laravel Elixir] Sass Compilation Failed: Ressourcen/assets/sass/app.scss Fehler: @import Richtlinie Pfad eine URL oder zitierte erfordert auf Zeile 4 von stdin >> @import ('buttons'); ^ '' ' versucht, beide laufen: ' '' npm installiert -g schluck-Sass und npm installieren schluck-Sass '' ' immer noch die gleichen Fehler wie oben. – osherdo

+0

und beide Dateien sind im selben Verzeichnis? –

+0

aktualisiert meine Antwort, überprüfen Sie, ob Ihr Teil beginnt mit einem Unterstrich –

7

Sie können es wie folgt importieren;

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

@import "../_mixins"; 

@import "_main"; 

@import "_login"; 

@import "_exception"; 

@import "_utils"; 

@import "_dashboard"; 

@import "_landing"; 

Nach Ihren Verzeichnissen und es wird tun, was Sie wollen.

+0

Ich tat. Und Compilation mit Schluck verursacht keine Fehler. Die Sache ist, dass der Stil überhaupt nicht auf die Seite angewendet wird. – osherdo

+1

Sie müssen Ihren Sass-Ordner in den css-Ordner vorkompilieren und dann das kompilierte CSS in Ihre Seite einfügen. –

0

Ok, so scheint es, dass meine app.scss Datei kollidiert mit Bootstrap.css Datei. Weil ich die app.scssbackground Eigenschaft anwenden wollte, anstelle der Bootstrap CSS-Datei. Ich habe !important in dieser Eigenschaft hinzugefügt Bootstrap-Stil zu überschreiben .:

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

Auch gulpfile.js meine Bedürfnisse aktualisiert wurde entsprechend Hotel:

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

Und das ist, wie ich es behoben.