继续描述特殊的css文件的处理,webpack如何处理less文件呢?非常的简单,如果您阅读了上一篇webpack处理scss文件的文章,那么,本篇文件基本上就只用几秒,就可以快速带过了。因为基本原理一致!

苏南大叔:webpack4系列教程,webpack如何编译使用less文件? - webpack-less
webpack4系列教程,webpack如何编译使用less文件?(图4-1)

本文测试环境:win10node@14.2.0npm@6.14.4webpack@4.43.0mini-css-extract-plugin@0.9.0css-loader@3.5.3url-loader@4.1.0less@3.11.1less-loader@6.1.0

安装依赖

下面的这几个包,虽然不是本文的主要描述对象,但是有关联。

npm i mini-css-extract-plugin css-loader url-loader -D

下面的这两个包,是本文的主要描述对象:

npm i less less-loader -D

苏南大叔:webpack4系列教程,webpack如何编译使用less文件? - webpack-less-dependencies
webpack4系列教程,webpack如何编译使用less文件?(图4-2)

配置config

webpack.config.js:

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//...
module.exports = {
    plugins: [
        //...
        new MiniCssExtractPlugin({
            filename: 'css/[name].[hash:8].css',
        }),
    ],
    module: {
        rules: [
            //...
            {
                test: /\.(png|jpg|gif|jpeg|svg)$/,
                use: [{ loader: "url-loader",
                        options: {
                            name: "[name].[hash:5].[ext]",
                            limit: 1024, // size <= 1kib
                            outputPath: "img",
                            // publicPath: "../img",
                            esModule: false
                    }}
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        },
                    },
                    'css-loader',
                ],
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',  //img图片路径
                        },
                    },
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "less-loader"
                    }
                ]
            },
        ]
    },
}

苏南大叔:webpack4系列教程,webpack如何编译使用less文件? - webpack-less-config
webpack4系列教程,webpack如何编译使用less文件?(图4-3)

测试结果

test.less

@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
  background: url("./bg.png") left top repeat;
}

main.js:

//import "./test.css";
//import "./test.scss";
import "./test.less";

苏南大叔:webpack4系列教程,webpack如何编译使用less文件? - webpack-less-result
webpack4系列教程,webpack如何编译使用less文件?(图4-4)

lesssass的操作基本一致,区别就是npm i node-sassnpm i less的区别,其他的地方,基本上都是一致的。当然,sassless的自身区别,不是本文讨论的范畴。苏南大叔,觉得sass/scss更好用一些(瞎说的,哈哈)。

相关链接

总结

生命在于折腾,折腾完生命就有意义。更多有意义的文字,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   less    webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: