Gulp task: pipe gulp-sass to postCSS doing nothing

user_12582392 0
Viewed 321

I'm trying to:

  1. Add vendor prefixes to SCSS
  2. Compile to CSS
  3. Minify it

With this gulp code:

const {src,dest} = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('autoprefixer');
const sourcemaps= require('gulp-sourcemaps');
const postcss = require('gulp-postcss')
const postcssScss = require('postcss-scss') 

function genCSS() {
  return src(tpath.src.scss)
    .pipe(sourcemaps.init()) //line in css, maps to source (file & line).
    .pipe(postcss({plugins:[autoprefixer()], syntax:require('postcss-scss')}))
    .pipe(sass.sync({outputStyle:'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(dest(tpath.dest.scss)) //single index.css file
};

exports.genCSS=genCSS

But this is what postCSS logs, and indeed it is true:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

On the linked page: https://www.postcss.parts/, there are Sass plugins but this is not a compiler so I'm confused.

What is the mistake and how could it be solved?

postcss gulp sass
1 Answers

This

  .pipe(postcss([autoprefixer()],{syntax:'postcss-scss'}))

should be:

    .pipe(postcss([autoprefixer()],{syntax:'postcss-scss'}))

A few details:

  • If Config file is there, remove the options from postcss({...})
  • It runs faster without postcss-scss on the function argument (but it has to be imported), like so:
const postcssScss = require('postcss-scss') //keep this

.pipe(postcss([autoprefixer()])) //removed here

You can add cssnano and remove outputStyle:compressed but this will be slower (loading an extra package).

user_125823920
Related