@use 在 Sass 中無法導入變量，但 @import 正在運行

Question

我在文件 _variables.scss 中聲明了一個 sass 變量。 當我使用@use 導入該文件時，在編譯時出現錯誤，說明“錯誤：未定義的變量”。 但是，如果我改用@import，一切都編譯得很好。

這是導入的第一個文件

//_variables.scss
$primaryColor: rgba(199, 26, 113, 0.747);

這是正在導入的文件。

//styles.scss
@use 'variables';

header {
background: $primaryColor;
}

編譯時返回“錯誤：未定義的變量”。 但如果我將@use 更改為@import，它就可以正常工作。

為什么@import 有效但@use 無效？

Answer 1

在 sass 中使用下划線 _ 僅表示您正在聲明部分當 Sass 看到這些文件時，它不會將它們處理成 CSS 文件。

默認情況下，部分要求應將其導入另一個文件，該文件不可避免地會被處理為 CSS 以使其成為 output。 而不是使用@use

Answer 2

嘗試這個。 我的 SASS 文件夾中有一個名為“abstracts”的目錄。 在該文件夾中，我創建了一個 index.scss 文件。 在該索引文件中，我有以下內容

@forward "config";
@forward "variables";
@forward "named-colors";
@forward "hsl";
@forward "maps";
@forward "mixins";
@forward "reasonable-colors";

這些文件中的每一個都是部分“_variables”在我想要使用所有這些變量和 mixins 的 Sass 文件的 rest 中，我把它放在頂部

@use '../abstracts' as *

這樣所有變量都可以使用。 當然，您的文件夾結構可能會有所不同。 在抽象文件夾之后，我有基本文件、布局、模塊、頁面和主題的文件夾。 每個文件夾中的每個文件都使用 @use '../abstracts' as *