VUE—使用vue框架时怎么使用less写css样式（图文详情）

最新推荐文章于 2024-05-26 02:46:27 发布
最新推荐文章于 2024-05-26 02:46:27 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： VUE 文章标签： VUE less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Poppy_LYT/article/details/98394304
版权
本文详细介绍了在Vue项目中配置和使用Less进行CSS样式的步骤。首先通过命令行安装Less依赖，接着修改webpack配置以支持Less。然后在static目录下引入rem.js以实现移动端响应式布局。在assets的less文件夹创建base.less设置全局变量，最后在Vue组件中导入并使用less样式，确保其生效。
摘要由CSDN通过智能技术生成

VUE—less依赖

第一步：输入指令：
mac要加上sudo

sudo cnpm install less less-loader --D

第二步：修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less
在原来的代码上添加

{ 
	test: /\.less$/, 
	loader: "style-loader!css-loader!less-loader"
}

在这里插入图片描述

第三步：在static新建js文件夹引入rem.js文件并在index.html里直接script引入即可
在这里插入图片描述
在这里插入图片描述
这是rem的内容，适用于移动端响应式布局
在这里插入图片描述


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Poppy_LYT
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue2中使用less简易教程

				
			

			

				

					08-27
				

			

		

		

			
				
Vue2 中使用 Less 简易教程   Vue2 中使用 Less 是非常简单的，因为不需要手动配置 Webpack。只需要安装 Less 和 Less-loader 就...只需要安装 Less 和 Less-loader，然后在 Vue 组件中使用 Less 语法编写 CSS 样式。

			
		

	



                

              
                



	

		

			

				
					
详解如何在vue项目中使用layui框架及采坑

				
			

			

				

					10-17
				

			

		

		

			
				
总之，虽然在Vue项目中使用layui框架会遇到一些挑战，但通过理解Vue的构建流程和layui的使用方式，可以有效地解决这些问题。不断探索和实践，结合社区的智慧，我们可以找到更优的解决方案，让layui在Vue项目中发挥出...

			
		

	



                


  
              

                


	

		

			

				
					
在vue2.0项目中使用less编写css样式

				
			

			

				

					weixin_33805743的博客
				

				

					03-22
					
					575
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
vue  html  引入less 语法写css

				
			

			

				

					sky_sunshine_x的博客
				

				

					12-01
					
					543
					
				

			

		

		

			
				
1.下载less.js,地址：

https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js
2.新建css.less文件

3.引入less，js文件


<link href="__CSS__/home.less" type="text/less" rel="stylesheet/less"  />
<script src="__JS__/less.js"></script>


home.les

			
		

	



		

			
		



	

		

			

				
					
Vue-使用less样式

					
最新发布

				
			

			

				

					weixin_49352307的博客
				

				

					05-26
					
					154
					
				

			

		

		

			
				
【代码】Vue-使用less样式。

			
		

	





	

		

			

				
					
vue单独文件书写CSS样式-使用less书写VUE CSS样式

				
			

			

				

					书写人生
				

				

					06-17
					
					1119
					
				

			

		

		

			
				
安装及使用步骤如下：

npm install less-loader@4.1.0 --save



常见版本比较低报错：Module build failed: TypeError: loaderContext.getResolve is not a function

请更新最新版本即可

安装及使用步骤如下：

1、安装【npm install less-loader@4.1.0 --save】

2、在【build】文件下的【webpack.base.conf.js】文件中【rules】中加入
.

			
		

	





	

		

			

				
					
Vue + Less + Css变量实现热换肤功能

				
			

			

				

					Hzq88888的博客
				

				

					10-20
					
					558
					
				

			

		

		

			
				
Vue + Less + Css变量实现热换肤功能，自定义主题，一键换肤需求

			
		

	





	

		

			

				
					
vue环境搭建，安装css,js,less加载依赖

				
			

			

				

					abcde158308的博客
				

				

					03-22
					
					8701
					
				

			

		

		

			
				
vue环境搭建，安装css,js,less加载依赖安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org安装webpack：cnpm install webpack -g安装vue脚手架：npm install vue-cli -g在D盘下新建目录：demo，并在该文件夹下新建项目vue-example：d:cd ...

			
		

	





	

		

			

				
					
Vue3新特性之在Composition API中使用CSS Modules

				
			

			

				

					10-15
				

			

		

		

			
				
Vue3的`useCSSModule`函数允许开发者在使用Composition API时，利用CSS Modules的特性。  **什么是CSS Modules**  CSS Modules提供了一种方式来隔离CSS，使得每个组件可以拥有自己的样式空间，避免全局CSS选择器导致...

			
		

	





	

		

			

				
					
在vue 中使用 less的教程详解

				
			

			

				

					10-17
				

			

		

		

			
				
当在Vue项目中使用LESS时，可以提升样式开发的效率和可维护性。  安装LESS支持： 在Vue项目中使用LESS，首先需要安装LESS及相关Webpack加载器。可以使用npm命令行工具来安装。具体操作如下： ```bash npm install --...

			
		

	





	

		

			

				
					
vue-cli构建项目使用 less的方法

				
			

			

				

					08-29
				

			

		

		

			
				
在 Vue CLI 中构建项目时，使用 Less 可以提高开发效率和代码可维护性。本文将介绍如何在 Vue CLI 中使用 Less，并详细解释每一步的配置过程。  LESS 简介  LESS 是一种动态样式语言，扩展了 CSS 的功能，允许使用...

			
		

	





	

		

			

				
					
Vue+Less/Css简易动态切换主题

				
			

			

				

					weixin_46835329的博客
				

				

					10-03
					
					1912
					
				

			

		

		

			
				
Vue+Less/Css简易动态切换主题描述解决方法less安装和使用
描述
最近在完成一个简易后台管理系统的搭建，因为功能模块比较少，于是写了一个设置页面，想给整个web添加一个改变颜色的功能（只是切换一种或几种颜色，自定义改变颜色的话难度会麻烦一些，可以参考下最下方的链接），于是了解了一下css变量和less变量，打算从这俩方面入手（预编译用的less）
	//Css设置变量
	:root{--global-color:blue;}
	//调用变量
	#box1{color:var(--global-c

			
		

	





	

		

			

				
					
vue页面引入css、less文件

				
			

			

				

					webZRH的博客
				

				

					04-07
					
					2705
					
				

			

		

		

			
				
@import'../../../../assets/css/table-common.less'; //这是页面子组件引用css 注意层级目录../

@import'../../../assets/css/table-common.less'; //这是页面引用css 注意层级目录../

我使用@import'@./assets/css/table-common.less';会有问题
...

			
		

	





	

		

			

				
					
Vue.js 学习总结（6）—— Css 之预处理器 Sass(Scss)、Less 的区别与选择

				
			

			

				

					科技D人生
				

				

					12-20
					
					2780
					
				

			

		

		

			
				
Sass(Scss)、Less 都是，他们定义了一种新的语言，其基本思想是，用一种专门的编程语言为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。

			
		

	





	

		

			

				
					
vue项目 在style标签中引入css,less,sass的方法

				
			

			

				

					weixin_42700654的博客
				

				

					03-02
					
					7655
					
				

			

		

		

			
				
vue项目 style标签引入 less sass
在我们编写vue代码时,有时候需要写入大量的css样式,会有一些不方便的情况
1.有时候定义变量可能会和class名称重复,根据字符查找变量时会查出多个,不便于查找
2.css会占用大量的行数 页面的dom和js代码并不是很多 整个页面却有几千行甚至上万
我们可以将css代码单独放在静态目录下存放,在style标签中引入
根据项目所用语言定义文件后缀, .css .less .scss 这里定义的是less后缀
在需要的目录下 style标签下进行引入
可

			
		

	





	

		

			

				
					
Vue项目全局使用less样式，在组件中使用全局样式文件中定义的变量

				
			

			

				

					朽木自雕的博客
				

				

					12-01
					
					4047
					
				

			

		

		

			
				
当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量，此时只在main.js中import是不行的。

目录结构如下：



即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。





此时，只用import在main.js中导入variables.less文件是会报错的。

解决办法：

安装less和less-loader
...

			
		

	





	

		

			

				
					
Vue进阶（幺柒陆）：CSS 预编译语言 Sass、Scss、Less 和 Stylus

				
			

			

				

					IT全栈 华强工作室
				

				

					03-14
					
					4268
					
				

			

		

		

			
				
CSS预处理器定义了一种新的语言，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。CSS 预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS 预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。...

			
		

	





	

		

			

				
					
Vue+Less/Scss实现主题切换功能

				
			

			

				

					hbmern的博客
				

				

					02-23
					
					2598
					
				

			

		

		

			
				
目前，在众多的后台管理系统中，换肤功能已是一个很常见的功能。用户可以根据自己的喜好，设置页面的主题，从而实现个性化定制。目前，我所了解到的换肤方式，也是我目前所掌握的两种换肤方式，想同大家一起分享。

			
		

	





	

		

			

				
					
在vue项目中使用less

					
热门推荐

				
			

			

				

					朱登凯的专栏
				

				

					08-20
					
					2万+
					
				

			

		

		

			
				
less提供了可编程的css，包括以下机制，可以提高css代码的可维护性和可读性

定义变量并多次使用
mixins（一个样式中包含另一个样式）
格式嵌套（可以形成代码块，有利于提高可读性）
@import （可以将样式拆分到不同的文件中，形成组件）

本篇主要来讨论如何在vue项目中使用less
安装依赖包
npm install -D less less-loader@7.3.0

由于less-loader和webpack版本适配的问题，下面提供更多版本信息
@vue/cli的版本
$ vue --v

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值