javascript - Webpack 不会捆绑 less 到 css 吗？

Question

我尝试了各种配置。我设法将我的 jsx 代码转换为捆绑的 JS，所以这似乎可行。

现在我正在尝试将我的 .less 文件捆绑到/wwwroot/中的单个捆绑的 .css 文件中

我尝试在线搜索的每个来源都显示了他们复制的 3 个不同来源中的 1 个，但我无法使它们正常工作。

如何让 webpack 捆绑我的 less 文件并将其捆绑到/wwwroot/中的单个 css 文件？

我的文件结构:

/wwwroot/ /* wwwroot, public files*/
/Content/css/ /* .less files */
/Content/jsx/ /* .jsx files */

我的 webpack 配置:

"use strict";
var glob = require("glob");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        app: glob.sync("./Content/*/*.jsx")
    },
    output: {
        filename: "./wwwroot/[name].min.js"
    },
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 9000
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: "babel-loader"
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    use: "less-loader"
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "./wwwroot/[name].min.css"
        }),
    ],
};

这是输出:

Version: webpack 2.5.1
Time: 322ms
               Asset     Size  Chunks             Chunk Names
./wwwroot/app.min.js  2.75 kB       0  [emitted]  app
   [0] ./Content/jsx/app.jsx 0 bytes {0} [built]
   [1] multi ./Content/jsx/app.jsx 28 bytes {0} [built]
Process terminated with code 0.

Answer 1

为您的 ExtractTextPlugin 添加 fallback 选项，并在加载器列表中添加 css-loader。如果您还没有安装 style-loader，请使用 npm install --save-dev style-loader 安装。

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