CODEWITHSUNDEEP
gulppostcss
DuchSuvaa
DuchSuvaa

Reputation: 676

postcss/precss - convert .scss to .css

I'm usign postcss/precss with gulp to convert my scss markup to valid css. This is my gulpfile.js:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');

gulp.task('stream', function () {
  var processors = [
    precss
  ];
    return watch('src/*.css', { ignoreInitial: false })
        .pipe(postcss(processors))
        .pipe(gulp.dest('dest'));
});

gulp.task('default', gulp.parallel('stream'));

The problem is that it doesn't change file extensions, so I need to write scss in *.css files, and what I am trying to do is to set it to read scss from *.scss files and output css into *.css files. Can anybody tell me how to achieve that?

Upvotes: 0

Views: 321

Answers (1)

Manish Honnatti
Manish Honnatti

Reputation: 129

Not an expert on this, so I'll just share how we do sass compilation.

We use gulp-concat to concat the files together into one .css file. Your gulp snippet would be as follows:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');
var concat = require('gulp-concat');

gulp.task('stream', function () {
  var processors = [
    precss
  ];
    return watch('src/*.css', { ignoreInitial: false })
        .pipe(postcss(processors))
        .pipe(concat('FILENAME.css'))
        .pipe(gulp.dest('dest'));
});

gulp.task('default', gulp.parallel('stream'));

Don't forget to do npm install --save-dev gulp-concat first!

Upvotes: 1

Related Questions