eact项目全局使用less配置

在React项目中全局使用Less作为样式表语言，你需要进行以下步骤：

1. **安装依赖**:
首先确保已经安装了Node.js和npm（包管理器）。然后，在项目根目录下运行以下命令安装`less-loader`和`style-loader`，它们是处理Less文件的关键工具，以及`webpack`如果还未使用的话：

   npm install less-loader style-loader webpack --save-dev

如果你已经在使用Create React App，可以替换为：

   npx create-react-app my-app --template typescript --use-npm --scripts-version node14 --css-modules
   cd my-app
   npm install less less-loader style-loader --save-dev

2. **配置Webpack**:
- 对于非Create React App项目，打开`webpack.config.js`文件，找到`module.rules`部分，添加Less规则：

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

或者如果你之前设置的是CSS Modules模式，记得更新loader顺序和配置。

- 对于Create React App，由于它默认使用了Babel和CSS-in-JS解决方案（如 styled-components），需要手动创建一个`.babelrc`或修改`config-overrides.js`来引入less插件支持：

   {
     "plugins": ["@babel/plugin-syntax-less"]
   }

3. **编写Less样式**:
现在你可以开始在`.less`文件中编写样式了，比如创建一个全局样式文件，通常命名为`global.less`：

   body {
     background-color: #f0f0f0;
     font-family: Arial, sans-serif;
   }

   button {
     padding: 10px 20px;
   }

4. **引用全局样式**:
在React组件中，通过`import`引入并应用Less样式：

   import './global.less';

   function App() {
     return (
       <button className="my-button">点击我</button>
     );
   }