如何在自己的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 */并将您自己的添加到您的第一次导入中，它看起来会更干净。