如何正確導入我自己的CSS上的Sass？

我現在在學習sass，我很驚訝它的簡單性，但是我在編譯或導入時遇到了問題。如何正確導入我自己的CSS上的Sass？

因爲如果我嘗試查看我的style.css，它還包含Bootstrap框架和其他第三方CSS的樣式。

這是我的設置希望你能給我一些關於這個的想法。

styles.scss

// Import Bootstrap Compass integration 
@import "bootstrap-compass"; 

// Import custom Bootstrap variables 
@import "bootstrap-variables"; 

// Import Bootstrap for Sass 
@import "bootstrap"; 

// Import Font Awesome 
@import "font-awesome-compass"; 
@import "font-awesome"; 

// sass breakpoint 
@import "../assets/bower_components/breakpoint-sass/stylesheets/_breakpoint.scss";

mystyles.scss

@import 'styles'; 
@import 'mystyles-mixins'; 
@import 'mystyles-variables'; 

.... my styles below

正如你可以看到style.scss僅用於進口。你能幫我嗎？輸出是不錯，但我不喜歡我所看到的網頁源代碼，因爲它看起來像我的CSS是引導國有:-)

我使用指南針與青菜

來源

2017-06-14 Jerielle

當我編譯我的SCSS/SASS並添加自己的橫幅（註釋）時，我刪除了第三方評論。您可以在bootstrap's CSS file上看到，他們在頂端評論中添加了/*! */。當你編譯它時會有這個評論。你可以在documents上閱讀更多關於此的內容。

所以，如果你刪除所有的第三方強迫評論，例如。 /*! Comment */並添加您自己的第一個導入它應該看起來更清潔。

來源

2017-06-14 04:32:55 l3fty

我想我明白你的問題，這應該有所幫助。嘗試鏈接到CSS，而不是直接將資源導入到您的sass文件。例如，引導，去掉@imports爲引導CSS和把類似於網頁標題下面，這取決於你使用的是什麼版本的東西：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

這會從他們的樣式表分離的樣式表，但是你仍然可以在你的項目中使用它們。

來源

2017-06-14 04:17:45 ottiem

我建議不要這樣做，因爲它會增加http請求，導致只爲源代碼審美緩慢加載。 – l3fty

您可以緩存應該有助於加載速度的資源，但我同意源代碼美學提供的最小值，尤其是與加載速度相比時。 – ottiem

@ l3fty這不完全正確;它確實增加了http請求的*號碼，但實際上可能更有效。由於上述示例中的bootstrap.css來自其CDN，因此這會利用瀏覽器的並行性，因爲這些請求將同時進行。在將Bootstrap卸載到其CDN的同時，您也只能從服務器上提供自己的CSS。 – ebr

如何正確導入我自己的CSS上的Sass？

回答

相關問題