
在Vue3 + Vite项目中使用less
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
在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,
},
},
},
})
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
这样就完成了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样式。




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:6 个月前 )
9e887079
[skip ci] 5 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 8 个月前
更多推荐
相关推荐
查看更多
vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
vue-devui

基于全新 DevUI Design 设计体系的 Vue3 组件库,面向研发工具的开源前端解决方案。
vue

Vue implementation of Geist
所有评论(0)