2016-07-13 7 views
5

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

Переменная имеет динамический контент, который определяется во время сборки, в файле конфигурации webpack. Это соответствующая линия (я пробовал много вариантов его):

loader: 'style!css?-minimize!less?-minimize&{modifyVars:{"resources-path-prefix":"' + pathPrefix + '"}}' 

В приведенном выше примере некоторых PATHPREFIX в настоящее время определяется во время сборки, и мы хотим, чтобы передать его значение в контексте менее, где будет используется в директивах url() css.

Вышеупомянутое не работает - ничто не передается в меньшее, а значение переменной по умолчанию, заданное в соответствии с меньшим, применяется.

Может ли кто-нибудь показать, как правильно передать значение в процесс менее компиляции? Благодаря!

+0

Какова ваша фактическая переменная в разделе '@ resources-path-prefix' или' resources-path-prefix'? Я думаю, что вам не хватает '@', который ожидается в 'modifyVars'. – BenM

+0

В меньшей степени это префикс @ resources-path-prefix (так как должны быть объявлены меньшие переменные) –

+0

А хепс выглядит так, как editVars принимает как с символом @, так и без него. Мысль, которая, возможно, отсутствовала. – BenM

ответ

10

Так это было тяжело, но мы наконец сделал его работу (!). Аргх - столько времени потратил на попытку и выяснил синтаксис.

Вот задача: во время сборки мы хотим определить путь, который следует использовать в качестве базового url для разных ресурсов в меньшем количестве файлов (фоновые изображения, используя функцию url() less).

Сначала мы определили путь в файле конфигурации webpack. Его простой JS, но экранирующий шаблон для строки пути был абсолютно ореховым. Мы, вероятно, инвестировали часов именно на этом. Amazing. Вот оно:

var assetsPath = (someCondition) ? '/assets' : "\\/127.0.0.1:8080/assets"; 

Следующая конфигурация загрузчика для менее файлов, используя assetsPath префикс набора выше:

{ 
    test: /\.less$/, 
    exclude: /node_modules/, 
    loader: 'style!css?minimize=false!less?{"modifyVars":{"assetspath":"\'' + assetsPath +'\'"}}' 
} 

Обратите внимание на побег образец выше, где с помощью assetsPath в конфигурации загрузчика.

Затем вы должны убедиться, что пустая переменная определена в меньшем количестве файлов. Мы инициализируемся его в нашем файле «vars.less» с:

@assetspath: ''; 

Наконец, в любом соответствующем классе, мы можем использовать значение передается во время сборки, как это:

background-image: url("@{assetspath}/images/facebook.png"); 
3

Вы можете попробовать использовать query раздел загрузчика:

loader: 'style!css?-minimize!less?-minimize', 
    query: { 
     modifyVars: { 
      "resources-path-prefix": pathPrefix 
     } 
    } 
+0

спасибо за быстрый ответ. Однако это невозможно. Вы не можете использовать этот синтаксис с несколькими загрузчиками .... Вы сразу получаете: «Ошибка: не можете определить« запрос »и несколько загрузчиков в списке загрузчиков» (только что протестировал его). –

+0

Ahh. понял. Подумайте, вместо этого использовать меньше как отдельный загрузчик после других. – Neal

+0

, но при этом используется 3 цепных погрузчика - меньше, css и стиль (в указанном порядке). Нужно ли мне каким-то образом подражать «привязке» в отдельном режиме? (и если да, то как?). –

1

Это другой подход к этой ситуации, но нам удалось заставить все работать, конвертировав в Base64 каждый ресурс, загруженный файлами CSS. Мы должны были сделать это, потому что выяснение имени хоста ресурсов было возможно намного позже, чем файл конфигурации webpack.

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