问题标签 [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.
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
sass - 使用 Compass 构建 Ionic Sass 仍在寻找 Removed Sass 任务
使用具有默认 gulpfile 的离子空白模板并运行:
我可以构建应用程序的 Sass,但我想添加 Compass。因此,使用 Gulp,我根据 gulp -compass示例将以下代码添加到我的 gulpfile 中:
现在,当我使用以下方法构建时,它似乎可以工作:
但是,当我运行时:
它通过构建 Sass 中的任何更改而运行,我不断收到错误消息:
既然我已经删除了 'sass' 任务并将其替换为我的 'compass' 任务,并用 compass 替换了所有引用,为什么它甚至不再知道 'sass' 任务了? 默认 gulpfile 中只有三个引用,但让它工作的唯一方法是将我的 'compass' 任务重命名为 'sass',但在其中运行 compass 管道而不是 sass 管道。
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
javascript - 如何使用 gulp-sass 插件提高 Gulp 任务性能?
我有一个长循环的 sass 文件(生成大约 800 行 CSS),编译大约 25 秒。它太长了。
如何最小化编译时间?
谢谢!
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
gulp - 按要求合并生成的 sass 事件流的 gulp 任务不起作用
我有三个引导 sass 和另外两个 sass 文件,我正在编译并合并到一个 css 中。在引导程序上,我正在运行“uncss”以摆脱未使用的 css,但是对于其他人,我没有运行“uncss”,因为我不想要。为了合并这些,我使用“eventstream”。不幸的是,生成的组合 css 文件的顺序不符合我的要求。无论如何,引导 css 文件总是在最后打印,这会导致问题。以下是我的吞咽任务
在最终生成的 my-final-site.css 中,css 按以下顺序打印
我想将引导程序保持在顶部,以便我自定义的引导程序代码可以正常工作。
请帮忙。
gulp - 使用 Gulp 和 Sass 的背景图像
我在 Sass 和 Compass 中搜索并找到了这些背景图像路径,使用 Sass / Compass的 多个背景图像, Sass 背景图像
请耐心等待,因为我是 Gulp 的新手。我没有单独的 config.rb 文件,我在 gulpfile.js 中设置了所有内容。这是我所拥有的
当我输入时在 Sass 文件中
它不是从给定目录中选择图像。如果有人能给我一个完整的解释如何使用 Sass 在 Gulp 中设置背景图像,我将不胜感激。
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 文件:
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 和依赖项供参考。
提前致谢。
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 文件:
最后,这是源映射文件(美化):
结论
从以上所有内容可以看出,sourcesContent
sourcemap 文件中的 与生成的 CSS 完全相同。这使得源映射非常无用。
我在这里做错了什么,我该如何解决?
以下是这些文件的下载:gulp-sass-autoprefixer-sourcemaps.zip。
测试:提取它,然后运行npm install && gulp css
.