2015-12-12 8 views
8

Wie kombinieren Sie einfache CSS und Sass-Datei mit Laravel Elixir? Wenn ich den folgenden Code ausführe, werden zwei Dateien "all.css" und "app.css" im Verzeichnis public/CSS/ generiert. Ich möchte jedoch nur eine CSS-Datei generieren, die all.css wäre. Kennst du Tricks, um es zu tun?Kombinieren Sie Sass und plain CSS in eine Datei mit Laravel Elixir

elixir(function (mix) { 
    mix.sass([ 
      'app.scss' 
     ]) 
     .styles([ 
      'owl.carousel.css' 
     ]); 
}) 

Antwort

15

Ich mache es normalerweise so. Verzeichnisstruktur:

/public 
    /css 
     all.css 
/resources 
    /css 
     app.css 
    /sass 
     app.scss 

Der Code sollte wie folgt aussehen:

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

Dies wird zunächst custom.css Datei in /resources/assets/css/custom.css erstellen und dann alle CSS-Dateien in diesem Ordner wird in einer Datei in /public/css zusammengeführt werden.

+0

Es gibt ein Problem damit im Debug-Modus. Da Elixir Quellkarten erstellt, verursacht es 404 Netzwerkfehler für 'custom.css.map', weil es nicht im öffentlichen Pfad existiert. Das Deaktivieren von Quellkarten verhindert außerdem, dass Sie in einer lokalen Umgebung debuggen können. Ich suchte nach einer Möglichkeit, Quellkarte nur für Sass zu deaktivieren, hatte aber kein Glück. – Omid

0

vielleicht nicht so sauber sein wie Verzeichnisse zu trennen, sondern eine SASS-Datei kompiliert in eine CSS-Datei, so in der Theorie Sie eine normale CSS-Datei in den Elixier Mixer passieren kann:

mix.sass(['app.scss', 'jumbotron-narrow.scss', 'datepicker_standalone3.css']); 

Das End-Ergebnis ist eine einzelne app.css-Datei im entsprechenden öffentlichen Verzeichnis.

+0

Dies wird Fehler werfen, die sich darüber beschweren, den Parameter sass 'src' zu verpassen, wenn Sie es versuchen. Funktioniert nicht. –