В препроцессоре Pug не работает ${variable}, как быть?

Question

[Abwel]

Добрый день встрял не могу продолжать дальше проект. У меня почему то не работает вот такая вот конструкция
- var www = 'row_expand.png';
- var img_row = require(`../../../components/length-stay/${www}`);
Переменную img_row передаю в миксин, но все сразу же ломаеться работает только так:
- var img_row = require(`../../../components/length-stay/row_expand.png`); - если прямо в лоб написать.
Помогите - это очень важно, у меня в проекте компонентная структура, и мне обязательно нужно чтобы я мог оперировать переменными в путях.

Comments

[lorentso]

вроде бы путь нужно полностью брать в кавычки.

если написать так, то работает

mixin length-stay(arrival,departure,path)
    div.length-stay
    div.date-arrival
    p #{arrival}
    div.date-arrival__dropdown ДД.ММ.ГГГГ
    img.img-row(src=path, alt="Стрелка")
    div.date-departure
    p #{departure}
    div.date-departure__dropdown 19.08.2019
    img.img-row(src=path, alt="Стрелка")
    
- var www= 'row_expand.png';
- var img_row= `../../../components/length-stay/${www}`;

...или так, если у вас  с  require

- var img_row= `require(../../../components/length-stay/${www})`

и дальше вызов

+length-stay("date Dropdown","date Dropdown",img_row)

[Abwel]

lorentso,
Добрый день вот такой вот вариант
- var img_row= `require(../../../components/length-stay/${www})`
определяет такую конструкцию ${www}, НО конечный путь получаеться вместе с require вот такой :
src="require(../../../components/length-stay/row_expand.png)" соответственно это не работает(

[lorentso]

Abwel, таку у вас переменная ${www} так и настроена, чтобы выводить 'row_expand.png', и ничего иного она вывести не может. Что жу вы хотите вывести еще, я не понимаю. И интересно, что у вас делает require в путях? Это не ошибка? Я просто новичок, и не сталкивался с таким кодом.

[Abwel]

lorentso,
вот как раз про require в пути то я пишу, что вот так как вы написали :
- var img_row= `require(../../../components/length-stay/${www})`
получается вот такой вот результат:
src="require(../../../components/length-stay/row_expand.png)"
Естественно require там быть не должно, о том и пишу, но он там есть(

[lorentso]

Abwel, так зачем вообще писать require?? уберите его

...вот -- первый вариант
- var img_row= `../../../components/length-stay/${www}`

и все у вас будет работать -- вместо ${www} подставится 'row_expand.png'

путь будет
src="../../../components/length-stay/row_expand.png"
ведь вы этого результат ждете?

[Abwel]

lorentso,
require мне нужен чтобы картинки импортились в итоговый бандл. Я использую webpack и он без require не видит картинок(

Answer 1

[inkShio]

#{www}

interpolation

Comments

[Abwel]

Нет #{www} это не работает. Такая конструкция работает только вместе с каким то тэгом например так p
#{arrival}.
Мне нужно переменную именно в кавычки вставить, вот так :
- var www = 'row_expand.png';
- var img_row = require(`../../../components/length-stay/${www}`);
Потом я img_row передаю в миксин где просто вставляю это как путь.

Вот вызов миксина :
+length-stay("date Dropdown","date Dropdown",img_row)

Это сам миксин:

mixin length-stay(arrival,departure,path)
div.length-stay
div.date-arrival
p #{arrival}
div.date-arrival__dropdown ДД.ММ.ГГГГ
img.img-row(src=path, alt="Стрелка")
div.date-departure
p #{departure}
div.date-departure__dropdown 19.08.2019
img.img-row(src=path, alt="Стрелка")

Answer 2

[ramanovsky]

Попробуйте так. Воторой должен 100% заработать.

// 1. Вариант
- var img_row = require(`../../../components/length-stay/#[www]`);
// 2. Вариант
- var img_row = require('../../../components/length-stay/' + www);

Comments

[Abwel]

Добрый день - это стандартные варианты они не работают.

НЕ РАБОТАЮТ вот такие вот конструкции:
- var img_row = require(`../../../components/length-stay/#[www]`);
- var img_row = require('../../../components/length-stay/' + www);
- var img_row = require(`../../../components/length-stay/${www}`);
- var img_row = require(`../../../components/length-stay/`+ `${www}`);

Вот что РАБОТАЕТ:
- var img_row = require(`../../../components/length-stay/row_expand.png`);
- var img_row = require(`../../../components/length-stay/` + `row_expand.png`);

Мне нужно как то вставить переменные в строку.

[ramanovsky]

Abwel, ну раз строки работают попробуйте toString вызвать.