使用 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' 
                 })
            }]
        },