如何用less添加类名和与webpack反应？

在前端开发中，可以使用LESS来简化CSS的编写过程，并且可以通过与Webpack的集成来实现自动化的编译和打包。

要在LESS中添加类名，可以使用&符号来引用父选择器，从而生成相应的类名。例如，假设有如下的HTML结构：

<div class="container">
  <p>Hello, world!</p>
</div>

可以使用LESS为该段落添加一个类名为highlight的样式，如下所示：

.container {
  & .highlight {
    color: red;
  }
}

这样编译后的CSS代码将为该段落生成一个类名为container highlight的样式。

在与Webpack的集成中，可以使用less-loader来处理LESS文件，并通过配置Webpack的module.rules来指定加载器。首先，需要通过npm安装less和less-loader：

npm install less less-loader --save-dev

然后，在Webpack的配置文件中添加以下规则：

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

这样配置后，Webpack将会对所有以.less结尾的文件应用less-loader进行处理，并将编译后的CSS样式通过style-loader插入到HTML中。

关于LESS的详细介绍和使用方法，可以参考腾讯云COS（对象存储）的官方文档：

LESS官方文档