Gulp SASS - How to Properly Name The Output CSS

Gulp Sass - How to properly name the output css?

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')
   .pipe(sass())
   .pipe(rename('navbar.css'))
   .pipe(gulp.dest('assets/css');

or

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

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

return gulp.src('assets/css/sass/**/*/*.navbar.scss')
   .pipe(sass())
   .pipe(concat('navbar.css'))
   .pipe(gulp.dest('assets/css');

gulp-sass modifying generated filename (style.css)

Try gulp-rename - looks pretty easy.

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

Yes it is possible you need to pass it the right options:

.pipe(sass({
  sourceComments: 'map',
  sourceMap: 'sass',
  outputStyle: 'nested'
}))

Gulp 4 compilling scss creates empty css file, but sass compiles correctly

Resolved: It turns out that only style block that had some property was commented, thus causing .scss file return empty output, and sass won't compile empty blocks.

---

Related Topics