webpack-配置处理less 文件的loader

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

安装 less-loader

npm i less-loader -D

安装依赖包less，

npm i less -D

定义less匹配规则

   module: {//这个节点用于配置所有的第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            {test: /\.css$/,use:['style-loader','css-loader']}
            //test 代码是匹配规则， 我们用的是.css 需要用 loader 处理。
            ,{test: /\.less$/,user:['style-loader','css-loader','less-loader']}
            //由于less 文件也是一种样式，也是需要用到 css 处理模块 

        ]

    },

导入 less 文件

在 Css 文件夹 里 创建 index.less文件 ，并写入样式 ：

th {
    background-color: #09c;
    font: bold 16px "微软雅黑";
    color: #fff;
}

在main.js

导入 less文件

import './CSS/index.less'