React JSX 项目中使用 Less 的完整指南

要在 React JSX 项目中使用 Less，你需要将 Less 安装到你的项目中，然后在你的组件中引入 Less 文件。

安装 Less

使用 npm 安装 Less：

npm install less --save

创建 Less 文件

在你的项目中创建一个 Less 文件，例如 App.less。

// App.less
@primary-color: blue;

.app-container {
  background-color: @primary-color;
}

引入 Less 文件

在你的组件中，使用 import 语句引入 Less 文件，并在 className 中使用样式类。

import React from 'react';
import './App.less';

function App() {  return (    <div className='app-container'>      <h1>Hello World</h1>    </div>  );}

export default App;

配置 Webpack

如果你使用 Webpack 作为打包工具，需要在 Webpack 配置文件中添加 Less 的 loader。

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

这样就可以在你的 React JSX 项目中使用 Less 了。