问题标签 [gulp-sass]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
73 浏览

html - Gulp SASS random() 在 ubuntu 服务器上失败

random()在我的 ubuntu 服务器上编译时,我在 sass中的函数存在一些问题。

目前它在本地运行良好,但是如果我在我的 ubuntu 机器上运行 gulp 任务,gulp-sass则输出只会生成一次。

这是萨斯:

这是使用 gulp-sass 时 ubuntu 盒子上的输出:

正如您所看到的,它只生成一个随机数,并为所有重复使用相同的值,这与我的本地机器上的输出每次都是随机的不同。

如果我然后尝试在 grunt 之外使用 sass 编译器,sass sass/default.css style/default.css那么 random() 将完全失败:

我需要在我的 ubuntu 盒子上安装什么东西才能正确编译 random() 吗?我一直认为它是原生的 sass。

这是一个演示正确编译的 SassMeister: http ://sassmeister.com/gist/165fe1dcc831220c8717

0 投票
1 回答
692 浏览

sass - 使用 Compass 构建 Ionic Sass 仍在寻找 Removed Sass 任务

使用具有默认 gulpfile 的离子空白模板并运行:

我可以构建应用程序的 Sass,但我想添加 Compass。因此,使用 Gulp,我根据 gulp -compass示例将以下代码添加到我的 gulpfile 中:

现在,当我使用以下方法构建时,它似乎可以工作:

但是,当我运行时:

它通过构建 Sass 中的任何更改而运行,我不断收到错误消息:

既然我已经删除了 'sass' 任务并将其替换为我的 'compass' 任务,并用 compass 替换了所有引用,为什么它甚至不再知道 'sass' 任务了? 默认 gulpfile 中只有三个引用,但让它工作的唯一方法是将我的 'compass' 任务重命名为 'sass',但在其中运行 compass 管道而不是 sass 管道。

0 投票
1 回答
1134 浏览

node.js - Gulp 命令停止并出现错误:spawn ENOTDIR

我承认有很多类似的问题,但没有一个我能找到解决方案。

我正在尝试编译 Sass 和 JS,但出现以下错误:

看来瓶颈是return sass(...)陈述。我的gulpfile.js样子是这样的:

  • OS X 优胜美地 10.10.3
  • 红宝石 v2.0.0p481
  • 宝石 v2.0.14
  • 节点 v0.12.3
  • NPM v2.9.1
  • 吞咽 v3.8.11
0 投票
1 回答
1393 浏览

javascript - 如何使用 gulp-sass 插件提高 Gulp 任务性能?

我有一个长循环的 sass 文件(生成大约 800 行 CSS),编译大约 25 秒。它太长了。

如何最小化编译时间?

谢谢!

0 投票
1 回答
684 浏览

javascript - gulp-sass 和 gulp-watch,保存 scss 时找不到文件

我目前正在设置我的 gulpfile,当 watch 任务正在运行 scss 任务时,我遇到了 gulp-sass 问题。

这就是我的 gulpfile.js 的样子:

base.scss 仅包含以下内容:(也尝试了完整路径并且没有 fileext。相同的结果)

我在控制台中遇到的错误:

基本错误是:1:9 File to import not found or unreadable: ./src/scss/modules/modules_base.scss

应用程序的结构:

该错误仅在我保存 modules_base.scss 并触发监视任务时发生,而在我运行默认任务时永远不会发生。

感谢所有建议!

注意:节点-v:0.12.0 Gulp:3.8.11 gulp-sass:2.0.1

0 投票
1 回答
225 浏览

gulp - 按要求合并生成的 sass 事件流的 gulp 任务不起作用

我有三个引导 sass 和另外两个 sass 文件,我正在编译并合并到一个 css 中。在引导程序上,我正在运行“uncss”以摆脱未使用的 css,但是对于其他人,我没有运行“uncss”,因为我不想要。为了合并这些,我使用“eventstream”。不幸的是,生成的组合 css 文件的顺序不符合我的要求。无论如何,引导 css 文件总是在最后打印,这会导致问题。以下是我的吞咽任务

在最终生成的 my-final-site.css 中,css 按以下顺序打印

我想将引导程序保持在顶部,以便我自定义的引导程序代码可以正常工作。

请帮忙。

0 投票
0 回答
868 浏览

gulp - 使用 Gulp 和 Sass 的背景图像

我在 Sass 和 Compass 中搜索并找到了这些背景图像路径,使用 Sass / Compass的 多个背景图像, Sass 背景图像

请耐心等待,因为我是 Gulp 的新手。我没有单独的 config.rb 文件,我在 gulpfile.js 中设置了所有内容。这是我所拥有的

当我输入时在 Sass 文件中

它不是从给定目录中选择图像。如果有人能给我一个完整的解释如何使用 Sass 在 Gulp 中设置背景图像,我将不胜感激。

0 投票
1 回答
468 浏览

sass - Web Starter Kit SASS 未编译

我正在将 SASS 与 Web 入门工具包一起使用,但它似乎没有编译我的 SASS。我的 CSS 文件的结构如下:

- - - - 应用程序

- - - - - -资产

-----------------款式/

-----------------------app.css

------------部分/

------------脚本/

------------scss/

---------------_bootstrap.scss

---------------_custom.scss

---------------_main.scss

---------------app.scss

需要 SASS 模块 var sass = require("gulp-sass")

我的 Gulp.js 文件包含以下任务:

WATCH SCRIPT (edited) // 监视文件的更改和重新加载

完整的 Gulp 文件:

0 投票
1 回答
454 浏览

gulp - win7 上的 Gulp-sass 或 gulp-ruby-sass,解决语法/依赖问题

因此,像许多 Gulp 新手一样,我正在努力让 gulp-sass 或 gulp-ruby-sass 在我的开发机器(win7、xampp、drupal)上正常工作。

我的问题很简单:如何通过 livereload 将 sass 编译到我的浏览器?

我可以确认我的 SASS 使用 compass-watch 或 bundle exec guard 正确编译,但是在 drupal 上使用 Omega4 设置的常规 livereload 非常缓慢。有人建议我研究 gulp/grunt,所以我做了,并选择了 gulp,因为据报道它易于配置

我还在我的网络服务器的根目录下正确安装了 gulp,我可以通过命令行单独调用我的 gulp 文件中的几个函数,也可以通过 gulp 调用整个文件。

我遇到的问题是 gulp-sass 和 gulp-ruby-sass 都不起作用!

使用 gulp-ruby-sass 我得到了arguments to path.join must be strings错误。错误发生在此函数的第二行:

使用 gulp-sass,我得到一个错误file to import not found or unreadable: variables/**/*

这个错误也发生在 src/return sass 行。我知道 gulp-ruby-sass 版本之间的语法发生了变化,但是没有一个新的语法变化对我有用,而且 gulp-sass 不应该有文件通配问题(?!)。

我不知道我需要哪种依赖项或语法组合来实现这一点。

供参考,这里是我的 gulpfile 和依赖项供参考。

提前致谢。

0 投票
0 回答
115 浏览

node.js - Sourcemaps 内容与编译输出相同 - 在 Windows 上

问题

gulp-sourcemaps用来为我编译的 sass 生成源映射。

这似乎适用于 linux/mac 计算机,但不适用于 Windows。sourcemap 中的内容与生成的 css 相同,而不是实际的源 sass

PS 我不想发布和链接到实际的源文件。我希望它们嵌入到源图中。


细节

这是我正在使用的完整 gulp 任务:

这是文件夹结构:


更多细节

我正在使用 Node v0.12.4 运行 Windows 7。全球gulp版本为 3.9.0。

这是我的package.json文件:

以下是中的原始源内容app.scss

这是生成的 CSS 文件:

最后,这是源映射文件(美化):


结论

从以上所有内容可以看出,sourcesContentsourcemap 文件中的 与生成的 CSS 完全相同。这使得源映射非常无用。

我在这里做错了什么,我该如何解决?


以下是这些文件的下载:gulp-sass-autoprefixer-sourcemaps.zip

测试:提取它,然后运行npm install && gulp css​​.