Menu icon Foundation
foundation cli-update?

When I "npm start" after a fresh install ("foundation new)" of the website stack with Zurb templates, I get this warning message upon "Starting 'sass' ... "

 

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option cause some error. Browserslist config 
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

 

Can this warning message be ignored for now? 

Is an update of the foundation cli on its way?

Or, where exactly do I have to replace Autoprefixer to Browserslist?

 

Kind regards

 

Ludo

 

 

 

installation cli

When I "npm start" after a fresh install ("foundation new)" of the website stack with Zurb templates, I get this warning message upon "Starting 'sass' ... "

 

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option cause some error. Browserslist config 
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

 

Can this warning message be ignored for now? 

Is an update of the foundation cli on its way?

Or, where exactly do I have to replace Autoprefixer to Browserslist?

 

Kind regards

 

Ludo

 

 

 

Brian Mickelson 2 months ago

I've had the same issue. It looks like the CLI has moved to using the .browserslist.rc file as suggested.

To eliminate the warning, I've just commented out the noted lines in the code block below from gulpfile.babel.js.

An added bonus is foundation watch now starts much faster. I am still testing to see if there are any issues brought up by these changes.

 

- Brian

 

function sass() {

  //const postCssPlugins = [ *** REMOVED THIS LINE ***
    // Autoprefixer
    //autoprefixer({ browsers: COMPATIBILITY }), *** REMOVED THIS LINE ***

    // UnCSS - Uncomment to remove unused styles in production
    // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
  //].filter(Boolean); *** REMOVED THIS LINE ***

  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    //.pipe($.postcss(postCssPlugins)) *** REMOVED THIS LINE ***
    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
    .pipe(browser.reload({ stream: true }));
}