在Vue3 + Vite项目中使用less

在Vue3 + Vite项目中使用less,需要安装lessless-loader两个依赖。

首先,在项目根目录下执行以下命令安装lessless-loader

bash 复制代码
npm install less less-loader --save-dev

安装完成后,在vite.config.js配置文件中添加以下代码:

javascript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
})

这样就完成了less的配置。你可以在Vue组件中直接使用less语法编写样式了,例如:

vue 复制代码
<template>
  <div class="container">
    <h1 class="title">Hello World</h1>
  </div>
</template>

<style lang="less" scoped>
.container {
  background-color: red;
}

.title {
  color: blue;
}
</style>

注意,如果你使用了scoped属性,需要在style标签中添加lang="less"来指定使用less语法。如果没有使用scoped属性,可以直接在style标签中编写less样式。

相关推荐
小奋斗几秒前
千量数据级别的数据统计分析渲染
前端·javascript
三小河19 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
Hilaku23 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
云枫晖37 分钟前
手写Promise-什么是Promise
前端·javascript
一枚前端小能手40 分钟前
📋 前端复制那点事 - 5个实用技巧让你的复制功能更完美
前端·javascript
小高0072 小时前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
东坡白菜2 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
小桥风满袖3 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
前端人类学3 小时前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
CryptoRzz3 小时前
印度尼西亚股票数据API对接实现
javascript·后端