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

安装配置 less

1 安装 less2 vite.config.js 进行相关配置3 使用 less

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

以下是在 React 项目中使用 Less 的一般步骤：

1 安装 less

npm install less -D

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

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 文件即可

import React from 'react';

import './idnex.less'; // import 引入即可

const Login = () => {

return (

);

};

export default Login;

好文推荐