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

安装配置 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;
相关推荐
MrGaoGang19 分钟前
耗时1年,终于我也拥有属于自己的AI工作流
前端·agent·ai编程
没有鸡汤吃不下饭33 分钟前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
用户76787977373233 分钟前
后端转全栈之Next.js后端及配置
react.js·next.js
跟橙姐学代码36 分钟前
Python时间处理秘籍:别再让日期时间卡住你的代码了!
前端·python·ipython
汤姆Tom40 分钟前
从零到精通:现代原子化 CSS 工具链完全攻略 | PostCSS × UnoCSS × TailwindCSS 深度实战
前端·css·面试
菜市口的跳脚长颌41 分钟前
Web3基础
前端
RoyLin44 分钟前
TypeScript设计模式:代理模式
前端·后端·typescript
IT_陈寒2 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿2 小时前
react 实现插槽slot功能
前端