编译更少，并使用 webpack 将 CSS 插入到模板中

Question

webpack 是否可以编译一系列.less部分，并将它们作为 CSS 插入到 html 模板中？

我有一个看起来像这样的组件

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

style.less看起来像

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

template.html看起来像

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

只是想知道是否有任何方法可以让输出看起来像...

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

Answer 1

您可以使用 extract-text-plugin 将 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