在vue项目中Less的安装使用

最新推荐文章于 2025-06-14 15:03:11 发布

原创最新推荐文章于 2025-06-14 15:03:11 发布 · 608 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #less #css预处理

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文详细介绍如何在前端项目中安装并使用Less预处理器，通过示例代码展示Less的基本用法，包括变量、混合和嵌套等特性，帮助开发者更高效地管理项目样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装Less

npm install less less-loader -D

2.基本用法

//必须在style标签上加scoped属性  
<style scoped lang="less">
	ul {
		li {
			width:160px;
			height:90px;
			border-bottom:1px solid #333;
			&:first-of-type {
				border-bottom:1px solid red;
			}
			&:last-child {
				border-bottom:0;
			}
		}
	}
</style>