Sass 仅在编译的 css 中包含来自基础部分的注释答案

【问题标题】：Sass only including comments from foundation partial in compiled cssSass 仅在编译的 css 中包含来自基础部分的注释
【发布时间】：2017-07-12 17:37:01
【问题描述】：

我正在尝试使用基础和 sass 制作一个 jekyll 博客，但我似乎无法正确编译基础 sass。当我构建jekyll时，没有错误，我写的部分似乎加载正确，基础似乎导入了，但只有顶部的cmets。

到目前为止，我的过程基本上是运行 npm install foundation-sites --save

将foundation sass 内容移出node_modules 文件夹，然后将foundation 包含在我的scss 文件中。

您可以在以下屏幕截图中看到输出的目录和 css 文件。

我有点不确定此时我还能尝试什么，如果有任何帮助，我将不胜感激！谢谢！

编辑：这里是分支和 repo 的链接，用于查看代码。 https://github.com/samuraiseoul/kimchiChingu/tree/23-sass

【问题讨论】：

可能是存储库网址？
是的，这需要更多信息来检查 app.scss 中发生的情况，因为它实际上与 main.scss 名称不同，而且我在 css 文件夹中也没有看到已编译的 css 文件.请记住，sass 会查找 scss“主文件”，在 yoru 的情况下，我认为它应该是“app.scss”，它应该有部分的 @imports 或任何你想要编译到新的 app.CSS 文件的东西。所以你可能想分享更多关于你是如何做到这一点的信息？
@DavidJacquel @Leo 这是一个指向 repo 分支的链接，其中包含 sass 文件。我还编辑了问题以获取链接。您应该能够克隆它并运行jekyll build 以使其运行。非常感谢我们的帮助，如果您有任何其他问题，请告诉我，我可以添加所需的信息。 github.com/samuraiseoul/kimchiChingu/tree/23-sass
您使用的是哪个操作系统？ jekyll、ruby 和 node 的哪个版本？
@KrisKrause 我正在使用 Linux Ubuntu 16.04、Jekyll 3.4.0 和 Ruby 2.3.1 以及节点 3.5.2

标签： css sass zurb-foundation jekyll

【解决方案1】：

嗯.. 似乎在foundation.scss 中导入的所有部分都只是 sass 函数、mixins 和变量。所以没有实际的 css 输出。

【讨论】：

嗯，我使用 npm 生成基础内容，但并没有真正删除任何内容。有没有其他更好的方式为项目打下基础？
如果您真的不想更改原始的基础 CSS，您可以只包含 foundation.scss 并将所有 @include 替换为缩小的基础 css 文件。要覆盖样式，您可以在 _sass 文件夹中添加另一个 .scss 文件，并在 '@include: 'foundation''; 之后使用 @include。在你的 main.scss 中。例如，您的 _sass 文件中会包含foundation.scss 和custom.scss。在 main.scss 中，你必须写 @include: 'foundation'; @include: 'custom';。这样，您的自定义样式将覆盖原始基础 CSS。希望这会有所帮助:)
这就是我现在在主分支中所做的，但我不想这样做，因为对于一些有效的东西，但对于像主颜色或其他的东西，如果我想要在整个项目中改变它，那么我必须从基础站点重新生成一个完整的 min.css 并记住我以前的所有值。我想通过 scss 让它工作，所以我不必包含很多我不想要的东西，并且将来可以更容易地改变事情。你知道我如何通过基础 sass 文件来完成这项工作吗？
我想您可以尝试使用 Gulp 或 Grunt 之类的任务运行器来执行此操作？ Here 是 Github 上的一个 repo，我发现它看起来有你需要的东西 - Foundation SASS 和 Jekyll。
是的，但那是为了开始一个新项目，我正在为现有的 jekyll 项目添加基础。 Jekyll 也有一些东西可以将 SASS 编译到其中，所以我不需要运行我认为已经编译好的任务。

【解决方案2】：

好吧，我想通了。问题是我必须要么在我的 sass 文件中包含基础所有东西，要么包含我想要的特定模块。

仅使用 @import 'foundation'; 还不够好，我还必须添加 @include foundation-everything; 或列出我想要的每个组件，以防万一我不想要所有东西。

【讨论】：

【解决方案3】：

即使添加后我也遇到了类似的问题

@include foundation-everything($flex: false);

我在更新我的 gulp-sass 模块后想通了。

【讨论】：

我们可能有不同的基础版本。无论哪种方式，感谢您在此处记录另一个修复程序。 :D