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'));
});
718 questions
19
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
  • 43,669
  • 58
  • 179
  • 268
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,551
  • 4
  • 20
  • 34
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
  • 377
  • 1
  • 7
  • 22
12
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
  • 121
  • 1
  • 6
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
  • 7,083
  • 17
  • 64
  • 146
12
votes
4 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,117
  • 9
  • 44
  • 81
11
votes
4 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
  • 9,459
  • 12
  • 53
  • 111
10
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
  • 149
  • 1
  • 7
10
votes
1 answer

gulp-sass work around for load_path support?

Problem: I'm using gulp-sass and would like to define a load_path so that I don't have to have really long @import rules voor bower dependencies e.g. @import "normalize" instead of @import…
Timidfriendly
  • 3,014
  • 4
  • 25
  • 35
10
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
  • 225
  • 2
  • 9
9
votes
6 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
  • 113
  • 1
  • 1
  • 12
9
votes
2 answers

Gulp ruby-sass and autoprefixer do not get along

I have a styles task in my gulpfile: gulp.task('styles', function () { var sass = require('gulp-ruby-sass'); var autoprefixer = require('gulp-autoprefixer'); return gulp.src('app/styles/main.scss') .pipe(sass({sourcemap: true,…
Steve
  • 12,696
  • 26
  • 104
  • 191
8
votes
1 answer

Set a variable while buiding SASS with gulp?

I use the following in gulp to build a CSS file from a SASS (*.scss) file : var gulp = require('gulp') , sass = require('gulp-sass'); var colortheme = 'blue'; gulp.task('build_css', function() { return…
Dylan
  • 8,273
  • 16
  • 82
  • 136
8
votes
1 answer

Gulp 4 - Gulpfile.js set up

I'm finding documentation on Gulp 4 extremely hard to find so I thought I might ask here to see if anyone can help. I'm pretty new to Gulp anyway and have been using Gulp 3 without any problems until I tried running it on a virtual machine we use…
Andy
  • 147
  • 2
  • 2
  • 12
8
votes
2 answers

Why is gulp-sass not creating output

I'm trying to get gulp to compile some sass, however I can't seem to get it to write out anything. I'm not seeing an error and using sass to compile myself is successful. Here is what my config looks like: var sass = require('gulp-sass'); var…
Steven
  • 4,527
  • 3
  • 32
  • 42
1
2
3
47 48