boi_echos boi_echos - 10 months ago 66
Sass (Sass) Question

Gulp Sass - How to properly name the output css?

I'm reading a tutorial about sass here then I tried some other approach and I cant get the answer in this tutorial. Theres the problem. I have this code in my gulpfile.js

gulp.task('compileNavbar', function() {

As of now, I only have assets/css/sass/guest.navbar.scss and this code locates the scss files correctly and puts the output css file in the correct directory BUT the css is named as guest.navbar.css which I didnt expect. I want it to be named as navbar.css but how to?

Answer Source

gulp-sass doesn't take any file name parameters. Use gulp-rename to rename your files. If you have more than one .navbar.scss files you want to concatenate into one navbar.css files, feel free to use gulp-concat. This one takes a file name parameter :-)

Install gulp-rename with npm install gulp-rename --save-dev

var rename = require('gulp-rename');

return gulp.src('assets/css/sass/**/*/*.navbar.scss')


Install gulp-rename with npm install gulp-concat --save-dev

var concat = require('gulp-concat');

return gulp.src('assets/css/sass/**/*/*.navbar.scss')