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

gulp-sass: main scss file unable to find and load partials

I am new to using gulp-sass and sass\scss structure in general, so bear with me! I have a scss file in which I want to import some partials. I have a styles folder in which lives my main scss file and a partials sub folder which contains a couple of…
mindparse
  • 6,115
  • 27
  • 90
  • 191
0
votes
1 answer

Appending the parent selector to the end generates the incorrect result with Elixir/Libsass

I have the following SCSS: .btn { color: #000; @at-root { a#{&} { display: inline-block; } } } I'm expecting the following CSS: .btn { color: #000; } a.btn { display: inline-block; } But when I compile it…
Vn.
  • 37
  • 4
0
votes
1 answer

recursive paths for libsass

I am using gulp-sass to compile sass in node.js. I am using the libsass config to set the includePaths option. The following code works: includePaths: './project/components/controls/selectAgencies/' ...but I would like to do something with…
Brett
  • 2,775
  • 4
  • 27
  • 32
0
votes
1 answer

Javascript is not running in the externall file

I am using GULP and everything works fine on the first page. I linked another project_1.html page to it but for some reasons its JavaScript is not working. External html file recognizes Sass except for new linked scrit2.js file. Any idea what may…
code4life
  • 31
  • 4
0
votes
1 answer

Reload with gulp-browser-sync without passing any argument

I'm writing my gulp file for my project. The code is below: gulp.task('sass', function() { gulp.src(paths.styles.src) .pipe(sass({ outputStyle: 'compact', includePaths: [paths.styles.src] })) …
eriknguyen
  • 520
  • 4
  • 13
0
votes
1 answer

SCSS, Compass and GULP: How to minify without breaking CSS?

I am using Gulp-Compass and want to minify my CSS. When I do this, the following code .tags-bar .sub-bullet:nth-last-of-type { display:none; } .ux-panel-hidden{ display:none; } becomes minified to: .tags-bar…
big_smile
  • 1,487
  • 4
  • 26
  • 59
0
votes
0 answers

Sass Extend Works not like at Sassmeister

I want this output which is delivered when I put my input into Sassmeister: .brand-kampagne-klick, .brand-kampagne-klick-1 { margin-top: 3rem; } .brand-kampagne-klick img, .brand-kampagne-klick-1 img { width: 100%; } .brand-kampagne-klick…
Andi Giga
  • 3,744
  • 9
  • 38
  • 68
0
votes
0 answers

Sourcemaps content same as compiled output - on Windows

The problem I'm using gulp-sourcemaps to generate sourcemaps for my compiled sass. This seems to work on linux/mac computers, but not on Windows. Instead of the actual source sass, the content in the sourcemap is the same as the generated css. P.S.…
Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
0
votes
1 answer

Gulp-sass or gulp-ruby-sass on win7, resolving syntax/dependency issues

So, like many people new to Gulp I'm struggling getting gulp-sass or gulp-ruby-sass working properly on my development machine (win7, xampp, drupal). My question is pretty simple: how can I get sass compilation with livereload to my browser? I can…
nizz0k
  • 471
  • 1
  • 8
  • 23
0
votes
1 answer

Web Starter Kit SASS not compiling

I am using SASS with web starter kit but it does not seem to be compiling my SASS. My CSS files are as structured as…
HGB
  • 2,157
  • 8
  • 43
  • 74
0
votes
1 answer

gulp task to merge generated sass event stream as required order is not working

I have three bootstrap sass and two more sass files which I am compiling and merging into one css. On bootstrap I am running "uncss" to get rid of unused css however for others I am not running the "uncss" as I don't want. To merge these I am using…
joy
  • 3,669
  • 7
  • 38
  • 73
0
votes
1 answer

Gulp command stops with Error: spawn ENOTDIR

I recognize that there are many similar questions, but none with a solution that I can find. I am trying to compile Sass and JS but am getting the following error: Error: spawn ENOTDIR at exports._errnoException (util.js:746:11) at…
Donnie
  • 6,229
  • 8
  • 35
  • 53
0
votes
1 answer

Building Ionic Sass using Compass still looking for Removed Sass task

Using an ionic blank template with its default gulpfile and running: ionic setup sass I can build the application's Sass, but I wanted to add Compass. So using Gulp I added the below code to my gulpfile based on gulp-compass examples: gulp.task(…
mtpultz
  • 17,267
  • 22
  • 122
  • 201
0
votes
1 answer

Gulp SASS random() failing on ubuntu server

I am having some issues with the random() function in sass when compiling on my ubuntu server. Currently it is working fine locally however if I run the gulp tasks on my ubuntu box gulp-sass the output is only generated once. This is the…
Simon Staton
  • 4,345
  • 4
  • 27
  • 49
0
votes
1 answer

How can i compiling sass files (gulp-sass)

now i use Gulp-Ruby-Sass for Gulp.js But the plugin gulp-ruby-sass slower than gulp-sass. I am very comfortable to typeset through .sass files. Are there ways to typeset through gulp-sass + .sass files? P.S. Sorry for my English.
winDeD
  • 1
  • 1