react 如何引入less

在 React 项目中引入 Less

安装 less 和 less-loader 依赖 通过 npm 或 yarn 安装 less 和 less-loader，确保项目能够编译 Less 文件。

npm install less less-loader --save-dev
# 或
yarn add less less-loader --dev

配置 webpack 在项目的 webpack 配置文件中（通常是 webpack.config.js 或 react-scripts 的配置），添加对 Less 的支持。如果使用 create-react-app，可能需要通过 react-app-rewired 或 eject 来修改配置。

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

创建 Less 文件并引入 在项目中创建 .less 文件，例如 styles.less，然后在 React 组件中直接引入。

// styles.less
@primary-color: #1890ff;

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

// App.js
import './styles.less';

function App() {
  return <div className="container">Hello, Less!</div>;
}

使用 create-react-app 的解决方案

如果项目基于 create-react-app 创建，默认情况下不支持直接修改 webpack 配置。可以通过以下两种方式解决：

使用 react-app-rewired 安装 react-app-rewired 和 customize-cra，然后在项目根目录创建 config-overrides.js 文件。

npm install react-app-rewired customize-cra --save-dev

// config-overrides.js
const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#1890ff' }
    }
  })
);

修改 package.json 中的脚本命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

使用 craco 另一种方式是使用 craco（Create React App Configuration Override）。

npm install @craco/craco craco-less --save-dev

创建 craco.config.js 文件：

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

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
            modifyVars: { '@primary-color': '#1890ff' }
          }
        }
      }
    }
  ]
};

修改 package.json 中的脚本命令：

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

注意事项

确保项目依赖的 webpack 版本与 less-loader 兼容。如果遇到版本冲突问题，可以尝试调整 less-loader 的版本。

在 TypeScript 项目中，可能需要为 Less 文件添加类型声明。在 src 目录下创建 declarations.d.ts 文件：

declare module '*.less' {
  const classes: { [key: string]: string };
  export default classes;
}

通过以上方法，可以在 React 项目中顺利引入并使用 Less，实现样式的模块化和变量管理。