不暴露react的webpack, 实现可以使用 less

如果你不想暴露 React 的配置文件，可以使用 react-scripts 提供的 craco（Create React App Configuration Overrides）工具。craco 可以让你轻松地覆盖 react-scripts 的配置。要使用 Less，需要在 craco 中添加 Less Loader。

以下是如何在 React 18 中配置 craco 支持 Less 的步骤：

1. 安装 craco 和 less 相关的库 node:16.13.0, npm:8.1.0

npm install @craco/craco@6.0.0 craco-less@2.0.0 less less-loader 

2. 在项目根目录创建 craco.config.js 文件

3. 编辑 craco.config.js，添加以下代码：

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

4. 将 react-scripts 的启动命令或构建命令更改为 craco

在 package.json 的 scripts 中，将 react-scripts 的启动命令或构建命令更改为 craco。例如：

"scripts": {
  "start": "craco start",
  "build": "craco build"
}

5. 在组件中导入 Less 或 CSS 文件并使用

现在，你可以在组件中导入 Less 或 CSS 文件并像之前一样使用它们，不需要在配置中添加任何内容。

示例：

import styles from './myComponent.less'

function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, World!</h1>
    </div>
  )
}

以上是使用 craco 在 React 18 中引入 Less 的方法。