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.
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 .
gulp-sass supports both Dart Sass and Node Sass, although Node Sass is deprecated.
In 2021 most browsers understand sass, BUT compiling is still encouraged for performance and compatibility.
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));
});
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'));
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With