less—-+ less-loader —-> css—-+ css-loader—-> js —-+ style-loader —->放置到style元素

命令：

  1. npm i -D less-loader less

实例1：
webpack.config：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "development",
    devServer: {
        open: true
    },
    module: {
        rules: [
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
            { test: /\.less$/, use: ["style-loader", "css-loader?modules", "less-loader"] },        //开启modules模式
            { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },    //正常写法
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ]
}

index.less:

@color: #f40;

.main {
    color: @color;
    font-size: 2em;
}

index.js:

/**
 * css可以import进去，但是less不可以
 */
import styles from "./assets/index.less"
var div = document.getElementById("app");
div.className = styles.main;