使用Webpack将Less文件编译为单独的css文件

Question

我的index.js有以下导入

import "./less/home.less";
import "./less/dashboard.less";

所以现在，我希望webpack为我创建两个单独的css文件。 home.css和dashboard.css。

如何使用less-loader css-loader和extract-text-webpack-plugin

实现此目标

这是我的webpack配置文件。

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


const extractLess = new ExtractTextPlugin({filename:'stylesheets/[name].css'});

    module.exports = {
        entry : "./index.js",
        output : {
            path : path.resolve(__dirname),
            publicPath : '/',
            filename : "bundle.js"
        },
        module : {
            rules : [
            {
                test : /\.less$/,
                use : extractLess.extract(['css-loader', 'less-loader' ])
            }]
        },
        plugins : [extractLess],
        resolve : {
            extensions : ['.js'],
        },
    };

Answer 1

它可以通过更新代码

来工作

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