39-2 Webpack —Less loader 的 配置

如果我们希望在项目中使用less、scss、stylus来写样式， 我们这里以less为例，其他也是一样的。  我们还是先创建一个less文件，依然放在css文件夹中：

 

 

 

这里 创建了 Less 并且 写了 样式。

 

老样子 我们在入口写入依赖  让webpack解析并打包：

 

 

 

然后我们安装 对应的 loader ：

 

 

 

语句安装less 和 lessloader：【记得降低版本 不然报错   】

npm install less@版本 less-loader@版本 --save-dev

这里用的是下面这个版本：

npm install less@3.9.0 less-loader@4.1.0 --save-dev

然后我们把 module 放到webpack.config.js中：

module: {
        rules: [
          {
            test: /\.less$/i,
            use: [
              // compiles Less to CSS
              'style-loader',
              'css-loader',
              'less-loader',
            ],
          },
        ],
      },

 TIPS：如果存在一样moudle 和  rules 那么直接吧对象复制即可。。。即存在的就不用复制了（认真看即可 不然打包错误）：

 

2021年8月5日 09:50:44： 更新错误： 不知道有时候 那个  loader 好像不是 loader  是 use，就是说 module中 rules 中 的 loader  ，css那些都是use ，我现在loaer不行 反正你自己尝试  注意一下这个错误！都试试即可。。。

 

然后尝试打包运行。。。。

 

 

这就是 Less 文件 Loader 其实步骤都是一样的 就是 要下载安装loader 和 添加配置和依赖，非常容易啊