react中如何引用less

在React项目中引用Less样式文件

安装less和less-loader依赖包

npm install less less-loader --save-dev

配置webpack以支持Less

修改webpack配置文件（通常为webpack.config.js或react-scripts的配置）

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

创建并使用Less文件

创建一个.less文件（例如styles.less）

@primary-color: #1890ff;

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

在React组件中导入Less文件

import './styles.less';

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

使用CSS Modules与Less结合

配置webpack支持Less Modules

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

创建模块化Less文件（styles.module.less）

@primary-color: #1890ff;

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

在组件中使用

import styles from './styles.module.less';

function App() {
  return <div className={styles.container}>Hello World</div>;
}

使用create-react-app的项目配置

对于使用create-react-app创建的项目，需要修改配置

npm run eject

然后按照上述webpack配置方法进行修改

或者使用craco覆盖配置

npm install @craco/craco --save

创建craco.config.js

module.exports = {
  style: {
    modules: {
      localIdentName: "[local]_[hash:base64:5]"
    },
    css: {
      loaderOptions: {
        modules: {
          localIdentName: "[local]_[hash:base64:5]"
        }
      }
    },
    less: {
      loaderOptions: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1890ff'
          },
          javascriptEnabled: true
        }
      }
    }
  }
}