我如何才能正确地自己导入 Sass CSS？

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";

我的styles.scss

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

.... my styles below

如您所见，style.scss 仅用于导入。你能帮我吗？输出很好，但我不喜欢我在页面源代码上看到的内容，因为它看起来我的 css 属于 bootstrap :-)

我正在使用 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 时删除了第三方评论并添加了我自己的横幅（评论）。你可以在 bootstrap's CSS file they added /*! */ at the top comment. Meaning when you compile it will keep that comment. You can read more about this on the documents 上看到。

因此，如果您删除所有第三方强制评论，例如。 /*! Comment */ 并将您自己的添加到您的第一个导入中，它应该看起来更干净。

我如何才能正确地自己导入 Sass CSS？

How can I properly import Sass on my own CSS?

css

twitter-bootstrap

sass

compass-sass