目录

uniappscss变量使用方法

目录

uniapp:scss变量使用方法

https://i-operation.csdnimg.cn/images/cf31225e169b4512917b2e77694eb0a2.pngUniApp中SCSS变量使用技巧

1、最简单的方法,就是把项目所需要的scss变量放在uni-app自带的uni.scss文件里,无需import就能使用,但是要注意,使用变量的页面,lang必须为scss。


<style scoped lang="scss">
	.title {
		font-size: 36rpx;
		color: $uni-color-primary;
	}
</style>

直接在uni.scss新增自己需要的其他变量:

https://i-blog.csdnimg.cn/direct/970f68453cb24897b8ef8edbc4a61236.png

2、如果实在不想修改uni.scss的内容,可以自己创建一个scss文件,比如common.scss,定义变量的方法也是$my-color: #ff007f;这样的格式。

https://i-blog.csdnimg.cn/direct/4a84e6b5f42d4e08b457bf1e16dea31c.png

然后在需要使用变量的页面导入,@import ‘@/common.scss’; 第二个@一定记得要写。

https://i-blog.csdnimg.cn/direct/d24d313fd9b6402abcb1232ce2663062.png

遇到一个比较诡异的问题是,我想在App.vue里全局引入common.scss,但是会一直变量找不到。

只能在具体使用变量的页面里引入才可以,所以还是第一种方法比较简单。

https://i-blog.csdnimg.cn/direct/0cf9a499c0c249bdb5fdce07e4a83c85.png

https://i-blog.csdnimg.cn/direct/fcec5f18b445498797676d12ec6a5a5e.png