在Vue3 + Vite项目中使用less,需要安装less
和less-loader
两个依赖。
首先,在项目根目录下执行以下命令安装less
和less-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样式。