css - 如何使用Webpack 2在CSS文件中分离less文件？

我可以通过webpack2在<style></style>内的页面上编译较少的内容。但是我无法将less文件编译成CSS文件。

webpack.config.js：

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var ENV = process.env.NODE_ENV;
var port = '10101';

var commonAttr = ['common', 'markerFactory', 'sceneTransform', 'sparFactory', 'upload'];
var vendorArr = [];
for (var i = 0, l = commonAttr.length; i < l; i++) {
    vendorArr.push(path.resolve(__dirname + '/script/common/', commonAttr[i] + '.js'))
}

var config = {
    entry: {
        vendor: vendorArr,
        app: './script/app',
    },
    output: {
        path: path.resolve(__dirname, 'wds'),
        filename: '[name].bundle.js',
        publicPath: '/wds/'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        },
        // // this option will compile the less to css, and append style tag to the page
        {
            test: /\.less$/,
            use: [
                "style-loader",
                "css-loader",
                "less-loader"
            ]
        },

        // I tried to split the css file into a indenpendent file, but it didn't work
        {
            test: /\.less$/,
            use: {
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: "style-loader",
                    loader: "css-loader!less-loader",
                })
            }
        },
        {
            test: /\.html$/,
            use: "handlebars-loader?helperDirs[]=" + __dirname + "/script/helpers"
        }]
    },
    plugins: [
        new ExtractTextPlugin('[name].bundle.css'),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: "vendor.js"
        })
    ],
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    devServer: {
        compress: true,
        // hot: true,
        publicPath: '/wds/', //可访问的路径地址
        port: port
    }
}

if (ENV == 'development') {
    config.devtool = 'inline-source-map'; // 将模块单独编译 成 单个文件 浏览器可调试
}
else {
    config.devtool = 'eval-source-map'; // 将模块压缩一个文件一行 打包进bundle
}

var compiler = webpack(config);

module.exports = config;

但是它给出了以下错误：





如果我不使用ExtractTextPlugin rules use中的loader，它可以编译为样式标签。哪里出问题了？

最佳答案

抱歉，我修好了！

限定：

    var extractLESS = new ExtractTextPlugin('[name].bundle.css');

模块：

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

插入：

plugins: [
    extractLESS,
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        filename: "vendor.js"
    })
],

关于css - 如何使用Webpack 2在CSS文件中分离less文件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42246408/