【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;
相关推荐
今晚吃什么呢?6 分钟前
前端面试题之CSS中的box属性
前端·css
我是大龄程序员9 分钟前
Babel工作理解
前端
CopyLower22 分钟前
提升 Web 性能:使用响应式图片优化体验
前端
南通DXZ24 分钟前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
Mintopia1 小时前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
前端太佬1 小时前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia1 小时前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
xRainco1 小时前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端
印第安老斑鸠啊1 小时前
由一次CI流水线失败引发的对各类构建工具的思考
前端
CodePencil1 小时前
CSS专题之外边距重叠
前端·css