react如何加入less

在React项目中集成Less

安装less和less-loader依赖包，确保项目支持Less语法编译。

npm install less less-loader --save-dev

配置Webpack

修改webpack.config.js文件，添加Less规则以处理.less文件。

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

创建并使用Less文件

新建.less样式文件并导入React组件中。

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

.container {
  background: @primary-color;
}

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

Create React App项目配置

使用react-app-rewired覆盖默认配置，创建config-overrides.js文件。

const { override, addLessLoader } = require('customize-cra');

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

变量覆盖与主题定制

通过modifyVars参数修改Less变量实现主题定制。

addLessLoader({
  lessOptions: {
    modifyVars: {
      '@primary-color': '#1DA57A',
      '@link-color': '#1DA57A'
    }
  }
})

类型声明支持

为TypeScript项目添加less模块声明文件typings.d.ts。

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