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

Question

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

因为如果我尝试查看我的样式.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 归引导程序所有：-(

我正在使用指南针和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">

这会将您的样式表与其样式表分开，但您仍然可以在项目中使用两者。