2017-01-06 3 views
1

Я работаю с Pug, и я хотел создать несколько миксинов, чтобы сделать некоторые компоненты многократного использования всего проекта. Я хотел создать несколько файлов, чтобы сделать mixins разделенными и классифицированными. Проблема возникает, когда я хочу включить файл с mixins в мой основной файл. Например:Pug mixins из внешнего файла не работает

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

Это не работает (когда я хочу включить mixins из отдельного файла). Я получил эту ошибку: jade_mixins.user_avatar is not a function

Но когда я включаю подмешать в файле он работает:

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') 

Любой ключ, что нужно сделать, чтобы это исправить? И да, путь правильный. Для компиляции мопса я использую пакет laravel-elixir-jade для эликсира ларавеля.

+0

Не уверен, является ли причина, но вы пробовали используя пакет ['laravel-elixir-pug'] (https://github.com/mrkmg/laravel-elixir-pug)? Джейд был переименован в Pug, и, возможно, в новом пакете есть некоторые изменения, которые исправляют это ... – gandreadis

+0

На самом деле я пробовал. Я использовал пакет laravel-elixir-pug с точно такой же конфигурацией (действительный с описанием пакета), и он не скомпилировал ни один из моих мошеннических кодов. Задача Gulp запускается без ошибок, но файлы не обновлялись. Так же, как он не мог найти мои файлы. –

+0

Я попытался воспроизвести проблему на чистой установке, см. Мой ответ ниже – gandreadis

ответ

1

Я попытался воспроизвести вашу проблему, но на моей машине она работает нормально. Я перечисляю настройку, которую я сделал для этого ниже, возможно, вы можете найти точку, в которой ваши отклоняются от этого.

Моя структура каталогов:

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

Мои 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" 
    } 
} 

Мои template.pug:

body 
    block content 
     include mixins/util 
     +test() 

util.pug Файл:

mixin test() 
    p Test 

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

После запуска gulp в корневом каталоге, это приводит к следующим template.html, как и ожидалось:

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

Ваш код верен. Мне удалось заставить его работать. Изменение пакета для мопса сделало трюк. Причина, по которой это не сработало для меня, - это код, который устарел, когда я изменил пакет на мопс, и когда я запускал задачу gulp, я не видел никаких ошибок, я видел их, когда я делал наблюдателя, тогда задача была остановлена ошибка. Теперь он работает отлично. –

+0

Ах, ладно, рад, что это помогло! – gandreadis

Смежные вопросы