Настройте Webpack для создания каталога файлов LESS в соответствующие файлы CSS.

Я надеюсь использовать Webpack, скомпилировать все наши файлы less в /less до /public/css и включить их в наши серверные шаблоны как обычный css (не вставлять текст в плагин, использующий ExtractText, или требовать перегрузки).

То есть я пытаюсь получить Webpack + загрузчик LESS или плагин для glob для компиляции всех файлов .less:

/less/foo.less /less/bar.less /less/unknown-new-less-file.less ...

и вывести их на

/public/css/foo.less /public/css/bar.less /less/unown-new-less-file.less

Затем я хочу включить их в наше приложение, вытащив файл css, используя <link rel="stylesheet" href="foo.css">

Я попытался использовать сценарий Bash и lessc вместо Webpack, который работал нормально, но не позволял нам автоматически перекомпилировать LESS при изменении исходных файлов.


webpack plugins less watch
person Max Heiber    schedule 27.07.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Проблема заключалась в том, что я использовал Webpack в качестве средства запуска задач, а это не так.

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

В итоге я использовал что-то вроде fswatch в скрипте npm для повторного запуска lessc.

Документация Less рекомендует использовать синтаксический анализ в браузере grunt, Gulp или dev-mode: http://lesscss.org/usage/#using-less-in-the-browser-watch-mode.

person Max Heiber    schedule 25.06.2017
comment
См. этот комментарий: stackoverflow.com/a/44859700/4319253. Скажите, если мне нужно добавить больше информации. - person S.Klechkovski; 01.07.2017
comment
@S.Klechkovski, наличие одного файла LESS, который импортирует все остальные, является интересным решением, спасибо. - person Max Heiber; 03.07.2017

arrow_upward
0
arrow_downward

Вместо веб-пакета вы можете использовать chokidar с lessc. Сначала установите чокидар: npm install chokidar-cli

Затем используйте его, чтобы просмотреть меньше файлов: chokidar "less/*.less" -c "lessc less/foo.less public/css/foo.css"

Документация по Chokidar на GitHub

Дополнительная информация о том, почему не использовать webpack для компиляции меньше отдельно: Можно ли использовать webpack для создания CSS и JS отдельно?

person tb11    schedule 23.06.2017