如何在我自己的CSS中正确导入Sass？

Question

我现在正在学习sass，我对它的简单性感到惊讶，但是我在编译或导入方面遇到了问题。

因为如果我试图查看我的style.css，它还包含的样式以及其他第三方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是由引导程序拥有的:-)

我用的是罗盘和sass

Answer 1

我在编译我的SCSS/SASS时删除第三方评论，并添加我自己的横幅(注释)。您可以在引导CSS文件上看到，他们在评论的顶部添加了/*! */。这意味着，当您编译时，它将保留该注释。您可以在文档上阅读更多有关这方面的内容。

所以，如果你删除所有第三方强制评论，例如。/*! Comment */并在您的第一个导入中添加您自己的，它看起来要干净得多。

Answer 2

我想我理解你的问题，这会有帮助的。尝试链接到css，而不是直接将资源导入sass文件。例如，使用引导程序，删除引导css的@imports，并将类似于以下内容的内容放在页面标题中，具体取决于您使用的版本：

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

这将将样式表与样式表分离开来，但您仍然可以在项目中使用这两种方法。