less-loader的less转成CSS的底层原理

less-loader是一个Webpack的加载器，它可以将LESS文件编译成CSS。less-loader的底层原理是通过less编译器将LESS代码转换成CSS。

以下是使用less-loader的一个基本配置示例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
};

在这个配置中，当Webpack遇到一个.less文件时，它会先通过less-loader，将LESS代码转换成CSS，然后通过css-loader处理CSS文件，最后通过style-loader将样式添加到JavaScript包中。

less-loader的底层实现主要依赖于less编译器，这是一个将LESS语言编译成CSS的库。less-loader会在Webpack构建过程中调用less编译器，将LESS文件编译成CSS。

具体步骤如下：

1. Webpack在处理到一个.less文件时，根据配置文件中的规则，选择less-loader来处理这个文件。
2. less-loader启动less编译器，将LESS文件编译成CSS。
3. 接着，由于配置了css-loader和style-loader，CSS会被处理成CommonJS模块，并且通过style-loader注入到JavaScript包中。

这就是less-loader将LESS转成CSS的底层原理和处理流程。