學習視訊位址：https://www.bilibili.com/video/BV1Zg4y1v75U?p=1

相關介紹

安裝

安裝node-sass

npm install  node-sass  -g
           

檢視是否安裝成功

node-sass --version
           

如果安裝得太慢，可以切換為國内的鏡像。

HBuilderX配置scss

工具——>插件安裝

安裝插件

重新開機HBuilderX，然後建立一個test.scss檔案，可任意輸入scss内容

$width: 1600px;
$pen-size: 3em;
#app {
    height: $width;
    font-size: $pen-size;
}
           

選中test.scss檔案，右鍵單擊出現面闆：外部指令/插件——>sass——>編譯scss/sass

編譯完成後，可以在test.scss同級目錄看到生成的test.css檔案

其中test.css結果為