webpack中配置less-loader

引言

在我的上一篇文章已经教大家如何配置Loader了，也介绍了css-loader与style-loader。这篇文章会会带大家来配置less-loader。这篇文章需要上一篇文章的基础。如果没有读过的，可以读一下我的上一篇文章webpack小demo教你快速上手loader，不会超过您十分钟时间。

关于less

less 到 css 是通过less工具，跟webpack完全没有任何关系,所以除了less-loader以外还需要安装less-loader。

npm install less less-loader -D

项目结构如下：

const path = require('path')

module.exports = {
  entry: './src/index.js', //入口
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader"
        ],
      },
      {
        test:/\.less$/i,   //使用正则表达式匹配less
        use:[
          "style-loader",
          "css-loader", 
          "less-loader"  //这个是导入顺序的第一个
        ]
      },
  ]


  }
}

test.less文件(这里代码很简单我就举个最基本的例子)

.content{
  color: pink;
  font-size: 2em;
}

component.js文件（引入less）

import "../css/base.css"  //在这里引入css文件
import "../css/test.less"  //引入less文件
let div1 = document.createElement('div')
document.querySelector('body').append(div1)
div1.innerHTML = ["Hello","World"].join(" ")
div1.className = "content"

index.js引入component.js，这里就不贴代码了。

实现

npm run build打包成功。引入打包后的js文件后, 效果如下：