1.首先检测一下你有没有安装scss语言，任意一个.vue页面写入lang="scss"声明。
<style lang="scss" scoped>
</style>
2.如果没有安装，会提示如下信息，去插件市场安装一个就好。
如果你用的是HbuilderX编辑器。
3.依此找到--菜单栏--工具--插件安装--安装新插件--前往插件市场安装--在搜索框输入scss--点击安装
图片教程：
scss语法好处：
1.可以嵌套写css样式
我们可以测试下：
基本框架：
<template>
<view class="container">
<view class="box">
<text>昨夜星辰昨夜风</text>
<button type="default">生成</button>
</view>
</view>
</template>
scss语法体验：
<style lang="scss" scoped>
.container {
height: 750rpx;
width: 750rpx;
background-color: #3F536E;
.box {
height: 375upx;
width: 375upx;
.text {
font-size: 60upx;
color: white;
}
button {
background-color: #4CD964;
}
}
}
</style>
效果预览：
2.全局变量用法
首先在uni-app项目中，找到uni.scss文件，这个文件是存放scss全局变量的文件。
uni.scss文件中
以$符号命名一个全局变量名称。
在其他.vue页面的样式中调用这个全局变量名。
