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

Question

我現在正在學習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由bootstrap擁有：-)

我正在將Compass與sass一起使用

Answer 1

我想我了解您的問題，這應該會有所幫助。 嘗試鏈接到CSS，而不是將資源直接導入到sass文件中。 例如，使用bootstrap，刪除bootstrap css的@imports，然后在頁面標題中放入類似於以下內容的內容，具體取決於您使用的版本：

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

這會將您的樣式表與其樣式表分開，但是您仍然可以在項目中使用這兩種樣式表。

Answer 2

編譯SCSS / SASS時，我會刪除第三方評論，並添加自己的橫幅（評論）。 您可以在引導程序的CSS文件中看到/*! */ /*! */在最上面的注釋。 編譯時將保留該注釋。 您可以在文檔中閱讀有關此內容的更多信息。

因此，如果您刪除所有第三方強制注釋，例如 /*! Comment */ /*! Comment */並將您自己的添加到您的第一次導入中，它看起來會更干凈。