Vue3+Vite项目使用less的实现步骤
更新时间：2024年02月26日 11:48:08 作者：码农键盘上的梦
最近学习在vite项目中配置less,本文主要介绍了Vue3+Vite项目使用less的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
在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样式。
使用示例
<template>
<div class="asd">
1
<p class="one">231</p>
</div>
</template>
<script setup>
</script>
<style lang="less" scoped>
.asd{
background-color: #111;
.one{
background: #f00;
padding:@padding-md;
}
}
</style>
到此这篇关于Vue3+Vite项目使用less的实现步骤的文章就介绍到这了,更多相关Vue3 Vite使用less内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue安装Element Plus全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue使用Element实现增删改查+打包的步骤，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-11-11
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
这篇文章主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
平时在获取真实DOM的时候获取不到最新的DOM元素，使用$nextTick就可以，那为什么$nextTick就可以获取到最新的DOM元素呢，本文就来带着这两个问题来解析一下nextTick的原理2023-05-05
这篇文章主要介绍了详解Vue Cli浏览器兼容性实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家详细介绍了VUEJS实战之构建基础并渲染出列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了vue路由打开一个新的窗口的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要给大家介绍了关于vue升降版本以及如何查看项目版本的相关资料,在开发和维护Vue.js应用程序时了解所使用的Vue.js版本非常重要,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
Vue项目中CSS Modules和Scoped CSS的介绍与区别
在vue中我们有两种方式可以定义css作用域,一种是scoped,另一种就是css modules,下面这篇文章主要给大家介绍了关于Vue项目中CSS Modules和Scoped CSS的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了Vue v2.5 调整和更新不完全问题的相关资料,需要的朋友可以参考下2017-10-10
最新评论