如何使用 @use 在我的 main.scss 中導入 .scss 模塊

Question

所以，讓我們假設我有以下情況：我有 2 個 .scss 文件。
一個帶有變量，另一個將實際翻譯成 .css 用於我的網頁，我想在其中訪問所述變量。

變量scss

$my_color: red;

主文件

@use 'vars'

body {
  color: $my_color;
}

我想要做的是訪問vars.css定義的變量並使用它。

參考是正確的，因為如果我使用@import而不是@use ，一切正常

我還嘗試按照文檔中的建議使用vars.$my_color引用變量，但我不斷收到“未定義變量”錯誤。

Answer 1

好吧，如果你閱讀了文檔，那么在⚠️ Heads up! 部分，在下面寫了進一步使用@import 規則的不可取之處，您可以閱讀以下內容：

---

@import 規則有很多嚴重的問題：

@import 使所有變量、mixin 和函數全局可用。

---

因此， @use規則使它們無法訪問。 這就是你在行動中觀察到的。

我認為要達到預期的結果，應該使用@use 和@forward 規則的組合。

但是我正在使用 VSCode Live Sass 編譯器（也許你也在使用它？）其中不支持 @use所以我不能給你確切的操作方法。

希望這能澄清很多。