lessをコンパイルしてwebpackを使用してテンプレートにCSSを挿入する

Question

webpackが一連の.lessパーシャルをコンパイルし、CSSとしてHTMLテンプレートに挿入することは可能ですか？

私は

@import "../style/index.less" 
.banner { 
    background-color: red; 
} 

template.htmlはtheresの場合だけに出力を得るための任意の方法を疑問に思っ

<div class="banner"> 
    This is a banner 
</div> 

のように見えるように、この

/banner 
- template.html 
- index.js 
- style.less 

style.lessのように見える部品が見えてい次のように見える...

<style> 
/* 
    Imported index.less style 
*/ 
.banner { 
    background-color: red; 
} 
</style> 
<div class="banner"> 
    This is a banner 
</div> 

Answer 1

あなたは他のファイルにCSSを抽出するために抽出テキスト・プラグインを使用することができます。

{ 
    test: /\.less$/, 
    use: ExtractTextPlugin.extract({ 
     fallbackLoader: 'style-loader', 
     loader: ["css-loader", "less-loader"], 
    }) 
    }, 

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/250