Webpack核心loader (三）—— 处理less

采故事的女孩

于 2019-08-26 10:23:53 发布

阅读量158

点赞数

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/weixin_42416812/article/details/100072537

版权

Webpack 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍如何在项目中引入并使用Less预处理器，包括安装less及less-loader，配置Webpack以支持Less文件的加载和解析，以及在入口文件中正确引入Less样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

less:

1.less

2.less-loader

安装：cnpm i less less-loader -D

index.js入口文件引入：
import '../less/index.less';

src下新建less文件，index.less
@w:120px;
@border:1px solid #000;

#box{
   width: @w;
  border:@border;
    ul {
        margin: 0;
        padding:0;
        list-style: none;
     
        li{
            height: 30px;
            background: green;

        }
    }

}

webpack.config.js文件配置：

module:{
       rules:[//对象
           //这里面放的就是一个个的loader,每一个loader要放在一个对象里,这里面的内容不能变，从后往前解析
           {
               test:/\.less$/,
               use:[
                   {
                
                    //loader是可以进行参数的配置的，如果需配置的话就必须放再一个对象当中
                    loader:MiniCssExtractPlugin.loader,
                    options:{
                         publicPath: '../',
                    }
               },
               'css-loader',
                'less-loader'
               ]
           }
       ]
   }