【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;
相关推荐
GISer_Jing34 分钟前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登39 分钟前
【Webpack】模块联邦
前端·webpack·node.js
Bottle4141 小时前
深入探究 React Fiber(译文)
前端
汤姆Tom1 小时前
JavaScript Proxy 对象详解与应用
前端·javascript
xiaopengbc1 小时前
在 React 中如何使用 useMemo 和 useCallback 优化性能?
前端·javascript·react.js
伍哥的传说1 小时前
React Device Detect 完全指南:构建响应式跨设备应用的最佳实践
react.js·前端框架·react hooks·操作系统识别·device-detect·react设备检测·浏览器检测
GISer_Jing1 小时前
React 18 过渡更新:并发渲染的艺术
前端·javascript·react.js
全栈技术负责人2 小时前
前端网络性能优化实践:从 HTTP 请求到 HTTPS 与 HTTP/2 升级
前端·网络·http
码上暴富2 小时前
Echarts雷达图根据数值确定颜色
前端·javascript·echarts