编译较少并使用webpack

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