React 中使用 Less

在 React 项目中使用 Less 需要进行 Webpack 相关的配置。

1. 安装 craco 和 craco-less：npm install craco craco-less。
2. 编写 craco 配置文件：在根目录下创建 craco.config.js 配置文件编写配置信息。

   const CracoLessPlugin = require('craco-less')
   
   module.exports = {
     plugins: [
       {
         plugin: CracoLessPlugin,
       }
     ]
   }
   

3. 编写 Less 文件并使用。

   // App.less
   .container {
     border: 1px solid black;
     
     .title{
       color: red,
     }
   }
   
   // App.jsx
   import './App.less'
   class App extends PureComponent {
     render() {
       return (
         <div className='container'>
           <h1 className='title'>App</h1>
         </div>
       )
     }
   }
   

4. 使用 craco 启动项目：将 package.json 中 scripts 里的 react-scripts 改为 craco，才能将 craco.config.js 中的配置合并到 React 脚手架的配置信息中。