gulpfile gulp-sass node-sass Error: Invalid CSS after

Error in plugin "gulp-sass" Message: node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss Error: Invalid CSS after "... floor(math": expected expression (e.g. 1px, bold), was ".div($grid-gutter-w" on line 369 of node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss from line 8 of node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss from line 2 of src/components/header/headerStyle.scss >> vbar-padding-horizontal: floor(math.div($grid-gutter-width, 2)) !defa ------------------------------------------^ Details: status: 1 file: /Users/dev/Projects/test/frontend/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss line: 369 column: 46 formatted: Error: Invalid CSS after "... floor(math": expected expression (e.g. 1px, bold), was ".div($grid-gutter-w" on line 369 of node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss from line 8 of node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss from line 2 of src/components/header/headerStyle.scss >> vbar-padding-horizontal: floor(math.div($grid-gutter-width, 2)) !defa ------------------------------------------^ messageFormatted: node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss Error: Invalid CSS after "... floor(math": expected expression (e.g. 1px, bold), was ".div($grid-gutter-w" on line 369 of node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss from line 8 of node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss from line 2 of src/components/header/headerStyle.scss >> vbar-padding-horizontal: floor(math.div($grid-gutter-width, 2)) !defa ------------------------------------------^ messageOriginal: Invalid CSS after "... floor(math": expected expression (e.g. 1px, bold), was ".div($grid-gutter-w" relativePath: node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss domainEmitter: [object Object] domainThrown: false
Code language: JavaScript (javascript)

Solution: in package.json and gulpfile.js

  • Update gulp-sass. I updated it from 4.0.2 to 5.1.0
  • Replace node-sass module with sass. I replaced node-sass 4.14.1 with sass 1.49.9
  • In gulpfile.js update the way how you import gulp-sass to this:
    const sass = require("gulp-sass")(require("sass"));

One thought on “gulpfile gulp-sass node-sass Error: Invalid CSS after

  1. thank you 🙂 The trick for me was the change from node-sass to sass. Still get a bunch of deprecation warnings but atleast it runs 🙂

Leave a Reply to craig Cancel reply

Your email address will not be published.