設定のWebPACKは、CSSファイルを対応するにLESSファイルのディレクトリを構築する

Question

私はWebPACKのがこだわりのない（通常のCSSとして、当社のサーバー側のテンプレートでそれらを/public/cssに/lessにすべての私達の小さいファイルをコンパイルして含める使用することを願っていますテキストを使用してExtractTextプラグインまたはオーバーロードする必要があります）。

私はWebPACKの+ LESSローダーまたはプラグインがすべての.lessファイルをコンパイルするためにグロブために取得しようとしている、次のとおりです。

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

と

/public/css/foo.less /public/css/bar.less /以下/未知の新しいに出力します-less-file.less

私はその後、私はうまく働いた代わりのWebPACKのbashスクリプトとlesscを、使用してみましたが、自動的に再コンパイルするには、私たちを有効にしません <link rel="stylesheet" href="foo.css">

を使用してCSSファイルで引いて、我々のアプリでそれらを含めたいですソースファイルが変更されたときのLESS。

Answer 1

ウェブパックの代わりにchokidarにlesscを使用できます。 まず、chokidarインストール：あなたの小さいファイルを見るためにそれを使用し、その後npm install chokidar-cli

を：以下、別々にコンパイルするためのWebPACKを使用しない理由について chokidar "less/*.less" -c "lessc less/foo.less public/css/foo.css"

Chokidar documentation on GitHub

詳細情報：Can I use webpack to generate CSS and JS separately?

Answer 2

問題は、Webpackをタスクランナーとして使用していたことです。これはそうではありません。

私はGulpまたはMakeの追加に抵抗していました。それは巨大な維持不能な混乱になり、チームが学ぶのが少し難しいので、それが素晴らしいことでも作るので、ギャルップ。

lessmを再実行するには、npmスクリプトでfswatchのようなものを使いました。

lessドキュメントでは、grunt、Gulp、またはデモモードのブラウザ内解析：http://lesscss.org/usage/#using-less-in-the-browser-watch-modeを使用することをおすすめします。