问题标签 [gulp-sass]

我使用 Google 的 Web Starter Kit 创建了一个新的网站主题。以前，我和 Grunt 一起工作过。由于这个工具包带有 Gulp，我决定试一试。

我遇到的问题是 livereload 和导入的 scss 文件。该套件包括一个带有 components.scss 文件和几个导入部分的设置（例如@import "_pages/_styleguide";，这可以很好地导入部分，但是除非我重新启动 gulp 任务，否则对 _pages/_styleguide.scss 的任何更改都不会刷新；但是，对 scss 的任何更改未导入的文件（而是包含在 gulp 任务中）将使用 livereload 重新编译和刷新。

gulp文件如下：

我正在尝试在我的 scss 文件中为我的图像添加前缀，例如在我的 scss 文件中

应该在css文件中转换为

在我的 gulpfile.js 中，我的样式任务定义如下：

现在的问题是，当我运行此任务并检查生成的 css 文件时，我得到

没有前缀路径。我没有收到任何错误。有什么建议在这里可能会出错吗？

我有一个非常简单的基于 gulp 的测试环境，仅使用 sass 和 susy2 gem - 没有指南针，因为指南针不再是 susy 2 的依赖项

我得到的错误是

问题文件第8行，susy的设置如下：

我正在使用 sass 版本 3.4，它应该支持 sass 映射语法和 gulp-sass 版本 0.7.3。连同 susy 2.1.3。

知道为什么我会收到此错误吗？

我正在尝试构建一个 gulpfile，它将观看 jekyll/sass/js 并与浏览器同步。该脚本正确地观察 jekyll 的变化，重建并注入浏览器中的所有变化。

但我无法弄清楚为什么它不同步 sass/js 更改，即使它们已被监视和重新生成。任何帮助将不胜感激！

多年来一直使用 gulp，主要用于管理我的 sass 文件。直到今天一切都运行良好，直到最近任务正在运行，但它们的输出没有被保存/写入。

我有一个正在监视的 scss 文件，如果它被更改，它会通过 gulp-ruby-sass 运行（即使使用 gulp-sass 也会出现同样的问题），然后在指定的目录中吐出，但这并没有发生。我收到一条通知，让我知道它运行了，但是没有输出任何内容，并且出于某种奇怪的原因，如果从我的 PHPStorm 窗口切换到 iTerm，它们会神奇地出现。

还有其他人经历过吗？我现在真的把头发扯掉了，因为我不知道出了什么问题。

干杯。

我有一个文件 app.scss 使用 gulp-ruby-sass 编译成 CSS 很好，问题是在我的控制台中我总是有这个错误：

当我在浏览器中检查时，我实际上并不太关心查看预处理文件（我发现渲染的 CSS 更好地发现错误）。我想要的是让这个错误消息消失。

我正在使用 Gulp 构建应用程序，就这个问题而言，这意味着文件从一个文件夹移动到另一个文件夹以提供服务。

我试着用

但这只是导致：

在我渲染的 CSS 的底部，我有这样的评论：

我的构建文件包含以下内容：

我还尝试将 sourcemap: 'none' 添加到 ruby​​Sass 构造函数中。

知道是什么原因造成的吗？

我正在尝试将 css 和 scss 文件合并到我的构建目录中的 main.css 文件中。它的工作，但不是在正确的顺序。scss 文件中的样式属性需要位于 main.css 文件的底部，以便它们覆盖其余部分。

我的 Gulp 任务如下所示：

我首先用变量定义源。我正在使用 gulp-sass 插件将 scss 文件转换为普通 css (.pipe(sass))，然后使用 es.merge 函数将两者合并并将它们连接到 main.css。

问题是 .scss 文件的样式属性最终位于 main.css 文件的顶端。我需要他们在底部。所以它们需要在底部连接起来。

关于如何做到这一点的任何线索？

这个周末我开始玩 gulp。我想设置一个可以

• 编译我的 sass 文件
  • 如果我在 sass 文件中出错，请继续工作
  • 使用 sass Bootstrap
• 生成源图
• 附加浏览器前缀
• 在浏览器重新加载的情况下注入已编译的 css
• 快速（开发环境中 1-2 秒）

我完成了大部分步骤，但浏览器前缀让我很难过这是我到目前为止所得到的

问题是自动前缀给了我一个错误并弄乱了源映射

我得到的错误：“gulp-sourcemap-write：找不到源文件：C:\WEB\skilldrill_v1\skilldrill\sass\app.css”

所以出于某种原因，它试图在 sass 目录中找到 css 文件

[编辑]
我设法找到了问题，但还没有解决。这个东西工作的管道：gulp-autoprefixer -> 做一些事情 -> 前缀任务 -> 乙烯基-sourcemaps-apply

gulp-autoprefixer\index.js第35行：applySourceMap(file, res.map.toString()); 从这一点开始，vinyl-sourmaps-apply 了解当前文件（在我的例子中为 app.css）也成为了一个源。

以下是问题：a) 它认为 css 文件与 gulp.src() 中指定的文件夹位于同一文件夹中，这通常不是真的 b) 它不仅适用于 autoprefixer 添加的行，而是添加了引用到每一行

您对这些信息有什么想法吗？我开始挖掘 gulp-concat 可以正确处理类似问题。

1）我有一个带有“角度应用程序结构的最佳实践”的角度应用程序设置。所以每个部分的文件夹可能有它自己的 *.scss 文件。需要将*.scss 转换为*.css，并在同一个文件夹中输出*.css 文件。

在 Gulp 中搞砸了几个小时，但语法不正确。它给了我很多不同的行为，但没有一个是我们想要的。

有人更了解 Gulp 吗？

2) 单独的 Gulp 问题，uglify 可以同时缩小 CSS 和 JS 文件吗？或者是否有单独的插件用于缩小 CSS？

3) 是否也有一个插件可以缩小 HTML 文件？对可用的东西不太熟悉。仍在尝试从示例中学习，但他们将所有不同的插件组合在一起，我不需要全部使用它们。但是当我把它们分开时，我破坏了很多东西，所以让它们工作起来真的很耗时。我可以花几天时间，试图让它正常工作。

这是我正在使用的任务的简化版本：

（这是Coffeescript，但Javascript几乎相同。如果上面难以解析，我可以提供JS。）

运行上述内容时，gulp-sourcemaps 会抛出：

换句话说，它在 Font Awesome 目录中寻找 Bootstrap 的文件。我尝试使用 gulp-if 代替 gulp-filter，但同样的错误也失败了。

编写此任务的正确方法是什么？