Menu
I am working with Pug and I wanted to create some mixins to make some reusable components across whole project. I wanted to create some files just to make mixins separated and categorised. The problem occurs when I want to include file with mixins into my main file. For example:
body
block content
include ./components/mixins/_mixins.pug
+user_avatar('', '#', 'Daniel')
This does not work (when I want to include mixins from separate file). I got this error: jade_mixins.user_avatar is not a function
But when I include mixin in the file it works:
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')
Any clue what to do to fix it? And yeah, the path is correct. To compile pug I use the laravel-elixir-jade package for laravel's elixir.
746
I've tried to reproduce your issue, but on my machine, it seems to work just fine. I'm listing the setup I made for this below, maybe you can find the point where yours deviates from this one.
My directory structure:
|- html/
|--- template.html (generated after running gulp)
|- node_modules/
|- views/
|--- mixins/
|----- util.pug
|--- template.pug
|- gulpfile.js
|- package.json
My 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"
}
}
My template.pug:
body
block content
include mixins/util
+test()
The util.pug file:
mixin test()
p Test
And the 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'
});
});
After running gulp in the root directory, this produces the following template.html, as expected:
<body>
<p>Test</p>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
