Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

gulp-sass not compiling sass files

Tags:

sass

gulp

I'm actually trying to build a gulp planning to do web related stuff, like compile sass, minify css, uglify javascript and so on. But I'm really having troubles with sass.

Here's a sample of my code :

gulp.task('compile-sass', function() {
    gulp.src(buildType+config.path.sass+"/main.sass")
        .pipe(compass({
            css: 'css',
            sass: 'sass'
        }))
    .pipe(gulp.dest(buildType+config.path.css+"/test"));
});

So I'm using compass here because i only have *.sass files and no .scss so gulp-sass wouldn't work for me. Therefore, I'm asking if anyone could give me a hint of why this task doesn't work. Here's what my console returns :

[gulp] Starting 'compile-sass'...
[gulp] Finished 'compile-sass' after 6.11 ms
[gulp] You must compile individual stylesheets from the project directory.


events.js:72
    throw er; // Unhandled 'error' event
          ^
[gulp] Error in plugin 'gulp-compass': Compass failed
at Transform.<anonymous> (/Users/myusername/node_modules/gulp-compass/index.js:37:28)
at ChildProcess.<anonymous> (/Users/myusername/node_modules/gulp-compass/lib/compass.js:136:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:753:16)
at Socket.<anonymous> (child_process.js:966:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)

I know I'm not using any config.rb, but two things : 1) I found no example of such files 2) gulp-compass doc gives example without such a file so I assume it's optional

Thanks in advance.

like image 969
soenguy Avatar asked May 16 '14 12:05

soenguy


People also ask

How do I compile a sass file?

Once Sass is installed, you can compile your Sass to CSS using the sass command. You'll need to tell Sass which file to build from, and where to output CSS to. For example, running sass input.scss output.css from your terminal would take a single Sass file, input.scss , and compile that file to output.css .

Does gulp sass use node sass?

gulp-sass supports both Dart Sass and Node Sass, although Node Sass is deprecated.

Does sass need to be compiled?

In 2021 most browsers understand sass, BUT compiling is still encouraged for performance and compatibility.


2 Answers

Thanks to SteveLacy i could manage to fix this.

If you only have .sass files, and no .scss, you need to use gulp-ruby-sass instead of gulp-compass or gulp-sass. Here is a sample of my working code :

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

gulp.task('compile-sass', function() {
    gulp.src(path/to/your/sass/folder/main.sass")
        .pipe(sass())
    .pipe(gulp.dest('path/to/your/css/folder));
});
like image 174
soenguy Avatar answered Sep 30 '22 09:09

soenguy


The most basic and simple way is:

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

gulp.task('styles', function() {
    gulp.src('sass/*.scss')
    .pipe(sass({ 
        noCache : true,
        style   : "compact"
    }))
    .pipe(gulp.dest('css'));
});
like image 35
elmauro Avatar answered Sep 30 '22 08:09

elmauro