天天看点

39-2 Webpack —Less loader 的 配置

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

39-2 Webpack —Less loader 的 配置

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

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

39-2 Webpack —Less loader 的 配置

然后我们安装 对应的 loader :

39-2 Webpack —Less loader 的 配置

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

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

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

npm install [email protected] [email protected] --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不行 反正你自己尝试  注意一下这个错误!都试试即可。。。

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

39-2 Webpack —Less loader 的 配置