如下圖所示：quick order 文件夾下存在一個 _index.scss 文件，其導入了 styles 文件夾下的 index：

然而，styles 文件夾下并沒有 index.scss 文件，只有一個 _index.scss. 但是，ctrl + click 點擊上圖第一行代碼后，會自動跳轉到 styles 文件夾下的 _index.scss 文件：

查看這個 @import 的語法：

Sass 擴展了 CSS 的 @import 規則，能夠導入 Sass 和 CSS 樣式表，提供對 mixin、函數和變量的訪問，并將多個樣式表的 CSS 組合在一起。 與需要瀏覽器在呈現頁面時發出多個 HTTP 請求的普通 CSS 導入不同，Sass 導入完全在編譯期間處理。

Sass 導入的語法與 CSS 導入相同，只是它們允許多個導入用逗號分隔，而不是要求每個導入都有自己的 @import。 此外，在縮進語法中，導入的 URL 不需要引號。

考慮下列兩個文件：

// foundation/_code.scss code {padding: .25em;line-height: 0; } // foundation/_lists.scss ul, ol {text-align: left;& & {padding: {bottom: 0;left: 0;}} }

在我的 style.scss 文件里如何導入二者？

@import 'foundation/code', 'foundation/lists';

注意語法，slash 后面，下劃線和擴展名 .scss 自動消失。也就是說，不需要顯式把下劃線 即 _ 寫到 @import 后面。

當 Sass 導入一個文件時，該文件被評估，就好像它的內容直接出現在 @import 的位置。 導入文件中的任何混入、函數和變量都可用，并且其所有 CSS 都包含在編寫 @import 的確切位置。 更重要的是，在@import 之前定義的任何mixin、函數或變量（包括來自其他@imports）都可以在導入的樣式表中使用。

注意，需要小心重復導入問題：

如果多次導入相同的樣式表，則每次都會重新評估。 如果它只是定義了函數和 mixin，這通常沒什么大不了的，但是如果它包含樣式規則，它們將被多次編譯為 CSS。

被導入 scss 文件的定位問題

為了確保樣式表適用于每個操作系統，Sass 通過 URL 而不是文件路徑導入文件。 這意味著您需要使用正斜杠，而不是反斜杠，即使您使用的是 Windows。

注意：如下圖所示：Windows10 使用的是反斜杠：

Load paths

所有 Sass 實現都允許用戶提供加載路徑：Sass 在解析導入時將查找的文件系統上的路徑。 例如，如果你通過 node_modules/susy/sass 作為加載路徑，你可以使用@import “susy” 來加載 node_modules/susy/sass/susy.scss。

但是，導入將始終首先相對于當前文件進行解析。 僅當不存在與導入匹配的相關文件時才會使用加載路徑。這可確保您在添加新庫時不會意外弄亂相對導入。

與其他一些語言不同，Sass 不要求您使用 ./ 進行相對導入。相對導入始終可用。

Partials

按照慣例，僅用于導入而非自行編譯的 Sass 文件以 _ 開頭（如在 _code.scss 中）。 這些被稱為部分，它們告訴 Sass 工具不要嘗試自己編譯這些文件。 您可以在導入部分時省略 _。

如果您在文件夾中寫入 _index.scss 或 _index.sass，則在導入文件夾本身時，該文件將被加載到其位置。

下列是一個例子：

_code.scss 和 _lists.scss 被同一文件夾下的 _index.scss 導入：

導入時不需要使用相對路徑，或者補全擴展名 .scss.

最后生成的 css：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的关于 SAP Spartacus feature library 里的 _index.scss 文件，和神奇的下划线省略行为的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。