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
4
votes
1 answer

How can I get SCSS line numbers to show in the CSS file when using Laravel Elixir to compile Sass (like Compass does)?

I am using Laravel 5.1 with Elixir: Laravel Elixir Documentation If you use Compass to compile Sass code, the resulting CSS file has comments above each selector that gives the line number of the code in the .scss file, as shown below: When using…
Daniel Twigg
  • 749
  • 4
  • 22
4
votes
2 answers

Output the line number from the SCSS file in compiled CSS with gulp-sass

I've recently switched from Grunt to Gulp task runner. Is it possible to output as comment the line number in the compiled CSS files that would indicate where a given rule came from in the SASS file? Such feature was enabled by default when I was…
luqo33
  • 8,001
  • 16
  • 54
  • 107
4
votes
1 answer

SCSS variables - same name, different value in different media breakpoints

I am creating an SCSS grid with specific problem - I would like to use one variable name, for instance $pad (for padding values), but that $pad variable would need to be different in different media breakpoints. Variable value is first set through…
Vladimir Jovanović
  • 3,288
  • 1
  • 20
  • 27
4
votes
1 answer

gulp watch and reload jekyll, sass, js

I'm trying to build a gulpfile which will watch jekyll/sass/js and sync with a browser. The script correctly watches the changes of jekyll, rebuilds and injected all the changes in the browser. But I can't figure out why it's not syncing sass/js…
iamskok
  • 600
  • 5
  • 19
3
votes
1 answer

How to compile Material.io design with gulp-sass without using Webpack?

I'm using this tutorial at Material.io and want to use Material.io with gulp-sass. But when I try to compile it, it shows the error @material\button\mdc-button.scss Error: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was…
3
votes
0 answers

Gulp Sass error when using map.get() instead of map-get()

In Visual Studio I'm using Gulp to compile Sass, using gulp-sass 4.0.2. When I use map.get() to get a mapped value, I get an error in Task Runner Explorer, but when I use map-get(), it works fine. So apparently it recognizes the latter syntax, but…
jbyrd
  • 5,287
  • 7
  • 52
  • 86
3
votes
1 answer

Gulp only watches main scss and not partials

I have a problem setting up my gulp task to automatically watch my scss changes. I am creating a express app and I have a folder like this : First I run my gulp task in the terminal gulp watch. Basically, when I add another css condition like body…
bradrar
  • 647
  • 1
  • 8
  • 19
3
votes
0 answers

Why use @media (min-width: 992px + 1px) instead of @media (min-width: 993px) in Bootstrap

In Bootstrap 4.1.3 it looks like some media queries are written as @media (min-width: 992px + 1px). This is not being rendered at all in my browser... (I'm compiling SASS) If I physically change that to: @media (min-width: 993px) in the compiled…
st3phhays
  • 95
  • 7
3
votes
1 answer

Updated Bootstrap + SASS in ASP.NET CORE 2, with Gulp?

I'm trying to add Bootstrap with SASS capability to my ASP.NET Core 2 project, but have difficulty accomplishing this. I used NPM to install Bootstrap into node_modules, then got Gulp to move minified css and js dependencies into my wwwroot…
haosmark
  • 1,097
  • 2
  • 13
  • 27
3
votes
2 answers

Merge multiple scss files into one css file

I'd like to merge all of my scss files into one compressed css file: Structure: stylesheets/ test.scss test2.scss gulpfile.js I tried this two tasks, which I found in several answers and tutorials, but I always got the scss file into a…
webta.st.ic
  • 4,781
  • 6
  • 48
  • 98
3
votes
1 answer

Node - An @import loop has been found

I'm new with js, node and all things related. I'm trying to set up a front end development environment from scratch, using gulp, bower, browser sync, and other plugins. I'm almost done, it's working in some way, except for a couple of details I…
3
votes
1 answer

Inherit all bootstrap classes from selector using Sass

I´m new with Sass, and I want all the bootstrap.css classes with a father id, like this: /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT…
ArtM
  • 63
  • 3
3
votes
5 answers

Using gulp with a team on a Local Server. Error: EPERM: operation not permitted, chmod

I am working with a web team and we keep all our files on a local shared server in the office. ( we are slowly moving everything over to git so please no comments about how dumb we are for not using git. Thanks! ) We are using gulp to compile our…
3
votes
1 answer

Gulp: only compile changed files AND compile parents when imported SCSS file is edited

At work we used to use Ruby to compile SCSS. I had the Ruby compiler set up as a file watcher in PhpStorm, and when I edited a partial imported by another file, the CSS file corresponding to the ancestor file was updated without any fuss. I want to…
tvanc
  • 3,807
  • 3
  • 25
  • 40
3
votes
0 answers

Why am I getting a "JavaScript heap out of memory" on gulp watch?

I have a pretty simple and straightforward gulpfile for sass compilation, concat, minification and browser reload on changes using a watch task that observes for *.php, *.js and *.sass. require('es6-promise').polyfill(); var gulp = require('gulp'), …
jagzviruz
  • 1,453
  • 12
  • 27