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
6
votes
2 answers

How do I create a custom command to replace `gulp` or `npm run`?

How can I write my own terminal commands for an NPM project, which would replace the gulp command without relying on npm run? My project contains the following Gulp and http-server custom commands... ## COMMANDS I CURRENTLY HAVE | Command …
6
votes
1 answer

How Do I Use Gulp to Minify and Autoprefix CSS files from SASS/SCSS

I'm having trouble with my gulpfile and can't figure out what's going wrong. Issues: autoprefixer not working as intended, and it isn't always properly outputting a .css and .min.css file as intended. var gulp = require('gulp'); var sass =…
hi.im.kvothe
  • 63
  • 1
  • 10
6
votes
1 answer

Sourcemap "sources" array links to "../../stdin" instead of actual SCSS file

I ran npm update today, and what followed is a disaster. I had trouble getting packages to install, but after everything appeared to be in the right place, I started up my gulp task that compiles my SCSS code into CSS. This code reproduces my…
SeinopSys
  • 8,787
  • 10
  • 62
  • 110
6
votes
2 answers

CSS Sourcemaps not generating properly with gulp, SASS, & autoprefixer

I have the following gulp task: var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'); gulp.src('html/css/sass/*.scss') .pipe(sass({ style: 'compressed', loadPath:…
Darryl Hein
  • 142,451
  • 95
  • 218
  • 261
6
votes
2 answers

gulp-ruby-sass not a recognized command in Windows

I'm trying out gulp for the first time on a Windows Server 2012 VM. I'm normally a Mac user, so I'm a bit new to Windows & Powershell for dev tools like this. I installed Node.js & npm (and nothing else). I created the following basic Gulpfile to…
Marcelo Somers
  • 209
  • 2
  • 12
6
votes
2 answers

Gulp suddenly compiling extremely slowly

Recently, for no reason I can tell, my gulp compile times for strictly sass tasks have become extremely slow. They are now averaging around 18-20s per compile, which is deathly slow. I tried switching from ruby-sass to node-sass, but node-sass…
thesublimeobject
  • 1,393
  • 1
  • 17
  • 22
5
votes
3 answers

Gulp: Compile SASS to CSS in the same folder

I'm trying to set up a modular workflow where, when running gulp, it will compile SASS files in a folder to CSS. Those new CSS files will be stored in the same folder. For example, here's my current folder structure: theme - modules - hero …
Freddy
  • 683
  • 4
  • 35
  • 114
5
votes
2 answers

Gulp is not converting scss to css

In Visual Studio, Gulp is not running to convert my scss files to css. The error I'm getting is: cmd.exe /c gulp --tasks-simple C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass\lib\binding.js:15 …
Sam
  • 26,817
  • 58
  • 206
  • 383
5
votes
0 answers

How to prevent Gulp creating intermediate files

i'm developing an Angular2 app and i'm using Gulp to manage tasks for building my app. Here is the tasks i use for the build: gulpfile.js // Generating minified CSS files for Angular2 Component styleUrls gulp.task('styles', function(cb) { return…
smartmouse
  • 13,912
  • 34
  • 100
  • 166
5
votes
2 answers

gulp sass.logError not working in visual studio task runner

Consider the following code: var gulp = require('gulp'); var sass = require('gulp-sass'); var gdebug = require('gulp-debug'); module.exports = function (sourcedir, targetDir, directTarget) { return function () { var source =…
Alex
  • 14,104
  • 11
  • 54
  • 77
5
votes
2 answers

gulp-clean-css cannot set the right relative path for url() for assets such as fonts and images

I use NPM and Gulp for my package manager and build system. I have installed "gulp-sass" to support sass, and "gulp-clean-css" so that I can @import css files inline. I capture my SCSS files in "_frontend/scss/**/*", and compiles that into a single…
Thomas Cheng
  • 695
  • 12
  • 26
5
votes
1 answer

Gulp gulp-sass "Error: EACCES: permission denied, open"

I have a node.js v4.2.1 and gulp. I use gulp-sass. After the first compilation i get css file with permissions. ls -la -r--rw-r-- 1 user user 190K Oct 27 03:01 common.min.css After subsequent compilations i get error. stream.js:74 throw er; //…
5
votes
3 answers

Laravel elixir and autoprefixer

So I saw that elixir doesn't automatically use autoprefixer. This is how my gulp file looks: var Elixir = require('laravel-elixir'); var autoprefixer = require('gulp-autoprefixer'); var gulp = require('gulp'); Elixir.config.sourcemaps =…
HaleyBuggs
  • 915
  • 3
  • 13
  • 29
5
votes
2 answers

Gulp watch all files but render only one (sass)

I want to make gulp watch for all changes on my work folders but to generate only one file. Because I use scss which imports all required files, there is no need to compile all .css files, only main one. Now, my gulpfile.js contains: var gulp =…
10robinho
  • 520
  • 6
  • 17
5
votes
2 answers

gulp-sass compiles Google Fonts CSS into the file, breaks protocol-relative link

When I use the following code in my .scss file @import url('//fonts.googleapis.com/css?family=SomeFont:400,700,400italic'); the SASS parser I use (nodejs gulp-sass) happily downloads the file from said location and includes it as plain text in the…
SeinopSys
  • 8,787
  • 10
  • 62
  • 110