【React】vite + react 项目，安装、配置、使用 less

swimxu2024-03-31 8:13

安装配置 less

- - [1 安装 less](#1 安装 less)
  - [2 vite.config.js 进行相关配置](#2 vite.config.js 进行相关配置)
  - [3 使用 less](#3 使用 less)

在 React 项目中使用 Less（一种 CSS 预处理器）可以让你更方便地管理样式。
以下是在 React 项目中使用 Less 的一般步骤：

1 安装 less

javascript 复制代码

npm install less -D

2 vite.config.js 进行相关配置

javascript 复制代码

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [
    react(),
  ],
  resolve: {
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true, // 支持内联 JavaScript
		modifyVars: { // 更改主题
		}
      }
    }
  }
});

3 使用 less

在需要引入样式的组件中，使用 import 引入 less 文件即可

javascript 复制代码

import React from 'react';
import './idnex.less'; // import 引入即可

const Login = () => {
  return (
    <div className='login_box'>login</div>
  );
};
export default Login;