ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

在Vue3 + Vite项目中使用less

2026/9/21 21:37:28 拓冰建站 浏览量
在Vue3 + Vite项目中使用less

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

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

npm install less less-loader --save-dev

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {less: {javascriptEnabled: true,},},},
})

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

<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样式。