連假第二天還是要來好好跟鐵人奮鬥一下，這時候覺得提早寫也有好處，這時候已經可以快樂可以天天烤肉（Ｘ，終於講到重頭戲use的用法module-system，後續幾天會來探討module-system裡面一些東西，今天會來使用@use來做說明

scss原生方法我們有@import的使用方式，如果多次@import同一個文件，可能會讓編譯速度變慢，導致衝突主要都@import都是在全域下，自己設計的變數跟引入第三方scss不小設計到相同功能，覆蓋之後不能使用，上述說問題我們可能因為變數導致功能異常，或是我們用了2.3隻@import檔案，你用了這其中一個變數，會不清楚這個變數是屬於哪一隻@import檔案，然好也會不同@import取了相同變數，也會出現後蓋前狀況，下面範例先舉例@import作法

@import的範例

編譯前
// _base-component.scss <=第一隻檔
$width: 100%;

// _card-component.scss <=第二隻檔
$width: 80%;

//第三隻檔
@import 'base-component';
@import 'card-component';


.hero {
    width: $width; // 80%
}

.card {
    width: $width; // 80%
}

因為使用上card-component，是後面引入因為他是屬於全域，所以導致後蓋前狀況結果

@use的範例

下面這個範例，如果這時候我們改用use的寫法

@use 'hero-component';
@use 'card-component';

.hero {
    width: hero-component.$width; // 100vw
}

.card {
    width: card-component.$width; // 80%
}

這樣我們編譯出來就不會有互相影響狀況，想說這個功能也太爽囉，結果一開始都不能編譯WTF，換了node.sass還是不行，結果目前只有"Dart Sass" 有支援這個用法 "@use"，在做範例寫得時候還懷疑一下自己環境，想說怪了怎樣都不行，後面只好乖乖去查文章，看完讓我知道我走了一個小時冤旺路確定是白走，後面先來解決環境問題，爬了許多方式結果都要架webpack就覺得好搞剛，後面去找了其他有沒有比較簡單方式可以處理，然後我找到一個vscode套件，安裝就可以用真低方便阿，不用很複雜設定，畢竟我們只是探討scss，使用環境當然越簡單越好。

vscode套件

DartJS Sass Compiler and Sass Watcher

@use環境的問題

use不能使用參考網站