【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;
相关推荐
JarvanMo2 分钟前
借助FlutterFire CLI实现Flutter与Firebase的多环境配置
前端·flutter
Jedi Hongbin16 分钟前
echarts自定义图表--仪表盘
前端·javascript·echarts
凯哥197021 分钟前
Sciter.js指南 - 桌面GUI开发时使用第三方模块
前端
边洛洛21 分钟前
对Electron打包的exe文件进行反解析
前端·javascript·electron
财神爷亲闺女21 分钟前
js 实现pc端鼠标横向拖动滚动
前端
用户20311966009621 分钟前
sheet在SwiftUI中的基本用法
前端
晴殇i22 分钟前
一行代码搞定防抖节流:JavaScript新特性解析
前端·javascript
啊花是条龙24 分钟前
使用 Axios 和 AbortController 实现请求控制和取消
react.js·typescript