2017-01-06 14 views
1

Ich arbeite mit Pug und ich wollte einige Mixins erstellen, um einige wiederverwendbare Komponenten über das gesamte Projekt zu machen. Ich wollte einige Dateien erstellen, um Mixins zu trennen und zu kategorisieren. Das Problem tritt auf, wenn ich Dateien mit Mixins in meine Hauptdatei einbinden möchte. Zum Beispiel:Pug Mixins von externen Datei funktioniert nicht

body 
    block content 
     include ./components/mixins/_mixins.pug 
     +user_avatar('', '#', 'Daniel') 

Dies funktioniert nicht (wenn ich Mixins aus einer separaten Datei aufnehmen möchte). Ich habe diesen Fehler: jade_mixins.user_avatar is not a function

Aber wenn ich in der Datei mixin umfassen funktioniert es:

body 
    block content 
     mixin user_avatar(avatar_url, profile_url, name) 
      .user(class='4u 6u(small) 12u(xsmall)') 
       a(href=profile_url) 
        .user-avatar-thumbnail.is-active(style="background-image: url('" + avatar_url + "')") 
        if name 
         span.user-name=name 
     +user_avatar('', '#', 'Daniel') 

Jede Ahnung, was es zu tun zu beheben? Und ja, der Weg ist richtig. Um Mops zu kompilieren benutze ich das laravel-elixir-jade Paket für Laravel's Elixier.

+0

Nicht sicher, ob dies die Ursache ist, aber haben Sie versucht, mit dem ['Laravel-Elixir-Mops '] (https://github.com/mrkmg/laravel-elixir-pug) Paket? Jade wurde in Pug umbenannt, und vielleicht gibt es einige Änderungen im neueren Paket, die das beheben ... – gandreadis

+0

Eigentlich habe ich es versucht. Ich habe 'Laravel-Elixir-Mops' Paket mit genau der gleichen Konfiguration (gültig mit der Beschreibung des Pakets) und es hat keinen meiner Mops-Code kompiliert. Gulp-Task wird ohne Fehler ausgeführt, aber die Dateien wurden nicht aktualisiert. Genauso wie es meine Dateien nicht finden konnte. –

+0

Ich habe versucht, das Problem bei einer sauberen Installation zu reproduzieren, siehe meine Antwort unter – gandreadis

Antwort

1

Ich habe versucht, Ihr Problem zu reproduzieren, aber auf meinem Computer scheint es gut zu funktionieren. Ich lese hier das Setup auf, das ich dafür gemacht habe, vielleicht kannst du den Punkt finden, an dem dein von diesem abweicht.

Meine Verzeichnisstruktur:

|- html/ 
|--- template.html (generated after running gulp) 
|- node_modules/ 
|- views/ 
|--- mixins/ 
|----- util.pug 
|--- template.pug 
|- gulpfile.js 
|- package.json 

Mein package.json:

{ 
    "name": "test", 
    "version": "1.0.0", 
    "main": "gulpfile.js", 
    "license": "MIT", 
    "dependencies": { 
     "gulp": "^3.9.1", 
     "laravel-elixir": "^6.0.0-15", 
     "laravel-elixir-pug": "^1.3.2", 
     "pug": "^2.0.0-beta6" 
    } 
} 

Mein template.pug:

body 
    block content 
     include mixins/util 
     +test() 

Die util.pug Datei:

mixin test() 
    p Test 

Und die gulpfile.js:

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

require('laravel-elixir-pug'); 

elixir(function (mix) { 
    mix 
     .pug({ 
      blade: false, 
      src: './views', 
      search: '**/*.pug', 
      pugExtension: '.pug', 
      dest: './html' 
     }); 
}); 

Nach gulp im Root-Verzeichnis ausgeführt wird, erzeugt dies die folgenden template.html, wie erwartet:

<body> 
    <p>Test</p> 
</body> 
+0

Ihr Code ist korrekt. Ich habe es geschafft, es zum Laufen zu bringen. Das Ändern des Pakets zu Mops hat den Trick gemacht. Der Grund, warum es für mich nicht funktionierte, war der Code, der veraltet wurde, während ich das Paket in Mops änderte und wenn ich eine Schluckaufgabe ausführte, sah ich keine Fehler, ich sah sie, als ich einen Beobachter machte, dann hörte die Aufgabe auf ein Fehler. Jetzt läuft es perfekt. –

+0

Ah ok, froh zu hören, dass es geholfen hat! – gandreadis

Verwandte Themen