Question

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

因为如果我尝试查看我的style.css，它还包含Bootstrap Framework的样式以及其他第三方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所有： - ）

我正在使用带有sass的Compass

Answer 1

我想我理解你的问题，这应该有所帮助。尝试链接到css，而不是直接将资源导入sass文件。例如，使用bootstrap，删除@imports for bootstrap css并在页眉中添加类似于以下内容的内容，具体取决于您使用的版本：

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

这会将样式表与样式表分开，但您仍然可以在项目中使用它们。

Answer 2

我在编译SCSS / SASS并添加自己的横幅（评论）时删除第三方注释。您可以在bootstrap's CSS file上看到他们在最高评论中添加了/*! */。编译时的含义将保留该注释。您可以在documents上详细了解相关信息。

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

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

2 个答案: