Questions tagged [gulp-sass]

a gulp plugin for compilation of Sass to CSS.

gulp-sass is a gulp plugin for compilation of Sass files to CSS files.

Basic example of usage:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

The plugin can also be used with gulp-sourcemaps:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function () { 
  gulp.src('./sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write('./sourcemaps'))
    .pipe(gulp.dest('./css'));
});

gulp-sass accepts node-sass compatible options, e.g.:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(gulp.dest('./css'));
});
749 questions
30
votes
4 answers

Gulp.js event stream merge order

I am trying to merge css and scss files into a main.css file that goes in my build directory. Its working, but not in the right order. The style attributes from the scss files need to be in the bottom of the main.css file so they overrule the…
Jabba Da Hoot
  • 794
  • 2
  • 7
  • 16
22
votes
5 answers

Cannot find module '../lib/completion' Inspite of installing Completion

I am getting this error Cannot find module '../lib/completion' however I have installed completion and completion.js is present in the lib file. ->gulp compile module.js:327 throw err; ^ Error: Cannot find module '../lib/completion' at…
Utpal - Ur Best Pal
  • 4,472
  • 3
  • 17
  • 28
21
votes
9 answers

name can only contain URL-friendly characters

I was trying to install package.json with npm init to install bootstrap in my folder but i am getting the error. npm install bootstrap@4.0.0-alpha.6 --save I am new to this i can't exactly figure what i am doing wrong. I was following a tutorial…
isrj5
  • 375
  • 1
  • 2
  • 14
21
votes
3 answers

gulp sass source map

I need help adding source map to SASS compiler in the same CSS output folder. Till now, I got to install gulp-sourcemaps module within gulpfile.js but couldn't know success to bind sourcemaps.write as gulp.task. Any help is much appreciated :) var…
user1556571
20
votes
1 answer

Can I install just Gulp globally?

I'm constantly working on new web development projects that don't ever, in practice, need their node_modules folder when deploying. It would suit me much more if I was just able to create a small gulpfile.js for each project, rather than 6000+ files…
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
17
votes
3 answers

Combine all sass files into a single file

Is there any option available in gulp-sass to combine sass files? For example: main.scss: $var: red; control.scss: @import 'main'; .a{ color: $var; } The combined output file should be single scss file like below $var: red; .a{ color:…
Yahwe Raj
  • 1,947
  • 5
  • 25
  • 37
16
votes
5 answers

Gulp-sass 5.0 how to use compiler with import() instead of require()?

Gulp-sass recently updated to version 5.0. They describe that it doesn't include a compiler anymore and they say you have to install in separately. They have documentation on how to let gulp-sass require the compiler with this piece of code. var…
Murrt
  • 163
  • 1
  • 1
  • 5
14
votes
2 answers

How Can I Use Multiple @include in SCSS?

I want to use multiple include in the same SCSS. For example: .section-ptb { padding-top: 130px; padding-bottom: 130px; @include desktop { padding-top: 80px; padding-bottom: 80px; } @include tablet { …
Rubel Hossain
  • 2,503
  • 2
  • 22
  • 23
13
votes
2 answers

Pros and cons of node-sass and gulp-sass

I was wondering what are the differences between node-sass and gulp-sass? What are the pros and cons of each version? I see that on www.npmjs.com node-sass has more than double of an advantage in downloads. Does this make it better? Is there a…
gogo_rulez
  • 389
  • 2
  • 10
  • 24
13
votes
6 answers

Gulp-sass not compiling Foundation 6 properly

I'm having some issues with Foundation 6 files, for some reasons they are just not including all of the sass components. I tried to use Foundation 5 and it worked fine. Here is my gulp task: gulp.task('styles', ['clearCss'], function() { …
user3586478
  • 141
  • 1
  • 6
12
votes
1 answer

browserSync.reload and browserSync.stream()) - what are the difference?

I have this gulpfile.js file: var gulp = require('gulp'), sass = require('gulp-sass'), uglify = require('gulp-uglify'), concat = require('gulp-concat'), browserSync = require('browser-sync').create(); gulp.task('sass', function() { …
ronjacob
  • 169
  • 1
  • 7
12
votes
5 answers

Livereload not working in Chrome using Gulp, what am I missing

I'm trying to use Livereload using Gulp, Sublime Text 3 and Chrome but for some reason it doesn't work. Here is what I did. Installed the Livereload extension in Chrome. Installed gulp-livereload. Setup gulpfile.js. Ran gulp. What am I missing…
fs_tigre
  • 10,650
  • 13
  • 73
  • 146
12
votes
4 answers

gulp-sass: ERROR - file to import not found or unreadable

I am having problems getting my SASS files to compile having now split them out and importing ones I require in my main scss file. I have a styles folder that contains: main.scss top_menu.scss I have added some imports to my main.scss: @import…
mindparse
  • 6,115
  • 27
  • 90
  • 191
12
votes
5 answers

gulp-sass @import CSS file

Using gulp-sass I can include .scss files with @import 'filepath.scss'; But when I try to import normal css files with @import 'filepath.css', It just added the import line of import url(filepath.css); to the output css file, rather than actually…
Nicekiwi
  • 4,567
  • 11
  • 49
  • 88
11
votes
3 answers

gulp-sass autoprefix sourcemap

This weekend I started playing around with gulp. I wanted to set up a task which can compile my sass files keep working if I make mistakes in the sass file work with sass Bootstrap generate sourcemaps append browser prefixes inject the compiled…
puffy
  • 235
  • 3
  • 9
1
2
3
49 50