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

我现在在学习sass，我很惊讶它的简单性，但是我在编译或导入时遇到了问题。如何正确导入我自己的CSS上的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是引导国有:-)

我使用指南针与青菜

来源

2017-06-14 Jerielle

当我编译我的SCSS/SASS并添加自己的横幅（注释）时，我删除了第三方评论。您可以在bootstrap's CSS file上看到，他们在顶端评论中添加了/*! */。当你编译它时会有这个评论。你可以在documents上阅读更多关于此的内容。

所以，如果你删除所有的第三方强迫评论，例如。 /*! Comment */并添加您自己的第一个导入它应该看起来更清洁。

来源

2017-06-14 04:32:55 l3fty

我想我明白你的问题，这应该有所帮助。尝试链接到CSS，而不是直接将资源导入到您的sass文件。例如，引导，去掉@imports为引导CSS和把类似于网页标题下面，这取决于你使用的是什么版本的东西：

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

这会从他们的样式表分离的样式表，但是你仍然可以在你的项目中使用它们。

来源

2017-06-14 04:17:45 ottiem

我建议不要这样做，因为它会增加http请求，导致只为源代码审美缓慢加载。 – l3fty

您可以缓存应该有助于加载速度的资源，但我同意源代码美学提供的最小值，尤其是与加载速度相比时。 – ottiem

@ l3fty这不完全正确;它确实增加了http请求的*号码，但实际上可能更有效。由于上述示例中的bootstrap.css来自其CDN，因此这会利用浏览器的并行性，因为这些请求将同时进行。在将Bootstrap卸载到其CDN的同时，您也只能从服务器上提供自己的CSS。 – ebr

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

回答

相关问题