uniapp css样式、引入阿里字体图标、使用less、scss

电玩女神 2021-07-24 12:19 886阅读 0赞

css样式
    	
    	*选择器无效
    	page相当于body选择器
    	1rpx=0.5px
    	
    	导入其他css文件
    		@import url("带后缀的css文件路径");
    	
    	全局样式
    		在App.vue中设置
    			App.vue中的样式设置了scoped,全局样式无效
    
    引入阿里图标
    	方式一:
    	1、将下载后的文件夹放入static中
    	
    	2、引入
    		全局使用:App.vue的style中:@import url('路径/iconfont.css')
    		
    	3、修改iconfont.css文件
    		在有format的url中最前面添加
    			~@/static/存放字体图标的文件夹/...
    			
    	4、使用
    		任意标签,如
    		<text class='iconfont'></text>
    		<text class="iconfont icon-tupian "></text>
    			标签中添加文本,字体图标会出现在最前面
    			
    	方式二:
    		1、将iconfont.css文件放入项目
    			删除多余url,只留src:url('data:xxx') format('xx');
    		
    		2、全局使用:App.vue的style中:@import url('路径/iconfont.css')
    		
    		3、使用通过iconfont.css中的文件名使用
    
    使用less、scss
    
    	1、HbuilderX的工具栏->工具->安装插件->选中less、scss安装
    	
    	2、和vue一样,修改style标签,lang='less/scss'

![在这里插入图片描述][2020050516430425.png]![在这里插入图片描述][20201109224607777.png_pic_center]

代码示例:  
**App.vue:**

**message.vue:**

<template>
    	<view>
    		<view class='box'>
    			样式
    		</view>
    		<text class='iconfont icon-shipin '></text>
    		<text class='iconfont'></text>
    	</view>
    </template>
    
    <script>
    </script>
    
    <style scoped>
    	@import url("../css/a.css");
    	.box{ 
    		height: 375rpx;
    		width: 375rpx;
    		background-color: #4CD964;
    	}
    	.box1{ 
    		background-color: #007AFF;
    	}
    </style>

[2020050516430425.png]: https://img-blog.csdnimg.cn/2020050516430425.png
[20201109224607777.png_pic_center]: /images/20210724/4e98ce7cc3ce4d5388459f2ae248ee18.png