Настройка Webpack построить каталог LESS файлов в соответствующие CSS файлы

Question

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

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

/less/foo.less /less/bar.less /меньше /unknown-new-less-file.less ...

и выводить их на

/public/css/foo.less /public/css/bar.less /меньше/Unkown новый -less-file.less

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

Я попытался с помощью сценария Bash и lessc вместо Webpack, которая работала хорошо, но не позволю автоматически пересобрать МЕНЬШЕ, когда исходные файлы меняются.

Answer 1

Вместо webpack вы можете использовать chokidar с lessc. Во-первых, установить сторож: npm install chokidar-cli

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

Chokidar documentation on GitHub

Более подробную информацию о том, почему не использовать Webpack для компиляции менее отдельно: Can I use webpack to generate CSS and JS separately?

Answer 2

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

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

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

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