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>昨夜星辰昨夜風(fēng)</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>

效果預(yù)覽：

uni.scss文件中

以$符號命名一個全局變量名稱。

在其他.vue頁面的樣式中調(diào)用這個全局變量名。