SCSS編譯後在CSS末尾保留@import

Question

我們需要將@import放在CSS文件的末尾。例如：

SCSS：

@import "reset.css"; 
Body { 
    font: 0.8em arial; 
} 
@import "customation.css" 

編譯到：

@import "reset.css";body{font: 0.8em arial;}@import "customation.css" 

但經過編譯它改變了@import秩序和CSS文件將是這樣的：

@import "reset.css";@import "customation.css";body{font: 0.8em arial;} 

保持@importing對我們非常重要文件在我們的定製結束。我們不能將@import手動放入CSS文件，因爲SCSS文件將被更改並且CSS文件將被重寫。 有什麼建議嗎？

Answer 1

你不能。 Sass很聰明，知道@import聲明必須位於文件的開頭，所以它會重寫它以使您有效。

@import CSS at-rule允許從其他樣式表導入樣式規則。除了@charset規則之外，這些規則必須先於所有其他類型的規則;因爲它不是嵌套語句，所以不能在條件組at-rules內使用。

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

如果這是不能接受的，你需要使用多個鏈接的聲明（這可以說是更好反正用戶）。

Answer 2

您是否使用@import出於任何特定原因？有性能影響，並且沒有重要的用例。

如果您使用Sass的@import來連接文件，這樣會更好，這也可以讓您以您想要的順序導入並依賴級聯。

@import "reset"; 

Body { 
    font: 0.8em arial; 
} 

@import "customation";