gulp error: "invalid mapping" [#2840130]

After installing radix and running gulp, I get the following error:

aaron@localhost:/var/www/html/mysite.com/sites/all/themes/myradixsubtheme$ gulp
[19:27:37] Using gulpfile /var/www/html/mysite.com/sites/all/themes/myradixsubtheme/gulpfile.js
[19:27:37] Starting 'css'...
[19:27:37] Starting 'fonts'...
[19:27:37] Starting 'watch'...
[19:27:37] Finished 'watch' after 48 ms
[19:27:37] Finished 'fonts' after 140 ms

/var/www/html/mysite.com/sites/all/themes/myradixsubtheme/node_modules/gulp-sass/node_modules/vinyl-sourcemaps-apply/node_modules/source-map/lib/source-map/source-map-generator.js:275
        throw new Error('Invalid mapping: ' + JSON.stringify({
              ^
Error: Invalid mapping: {"generated":{"line":1372,"column":17},"source":"radix/_mixins.scss","original":{"line":33,"column":-14},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (/var/www/html/mysite.com/sites/all/themes/myradixsubtheme/node_modules/gulp-sass/node_modules/vinyl-sourcemaps-apply/node_modules/source-map/lib/source-map/source-map-generator.js:275:15)
    at SourceMapGenerator_addMapping [as addMapping] (/var/www/html/mysite.com/sites/all/themes/myradixsubtheme/node_modules/gulp-sass/node_modules/vinyl-sourcemaps-apply/node_modules/source-map/lib/source-map/source-map-generator.js:105:14)
    at /var/www/html/mysite.com/sites/all/themes/myradixsubtheme/node_modules/gulp-sass/node_modules/vinyl-sourcemaps-apply/node_modules/source-map/lib/source-map/source-map-generator.js:76:19
    at Array.forEach (native)
    at SourceMapConsumer_eachMapping [as eachMapping] (/var/www/html/mysite.com/sites/all/themes/myradixsubtheme/node_modules/gulp-sass/node_modules/vinyl-sourcemaps-apply/node_modules/source-map/lib/source-map/source-map-consumer.js:570:10)
    at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (/var/www/html/mysite.com/sites/all/themes/myradixsubtheme/node_modules/gulp-sass/node_modules/vinyl-sourcemaps-apply/node_modules/source-map/lib/source-map/source-map-generator.js:52:26)
    at applySourceMap (/var/www/html/mysite.com/sites/all/themes/myradixsubtheme/node_modules/gulp-sass/node_modules/vinyl-sourcemaps-apply/index.js:22:40)
    at filePush (/var/www/html/mysite.com/sites/all/themes/myradixsubtheme/node_modules/gulp-sass/index.js:83:9)
    at Object.callback (/var/www/html/mysite.com/sites/all/themes/myradixsubtheme/node_modules/gulp-sass/index.js:123:9)
    at options.success (/var/www/html/mysite.com/sites/all/themes/myradixsubtheme/node_modules/node-sass/lib/index.js:300:32)

Comments

Comment #1

30 December 2016 at 19:51

AaronELBorg created an issue.

Comment #2

AaronELBorg CreditAttribution: AaronELBorg commented 30 December 2016 at 20:21

CSS looks bad (which could be related to the above??) ...and see this in the console:
http://mysite.com/sites/all/themes/myradixsubtheme/assets/css/myradixsubtheme.style.css Failed to load resource: the server responded with a status of 404 (Not Found)

Comment #3

shadcn CreditAttribution: shadcn at Chapter Three commented 2 January 2017 at 20:00

Hmmm, looking into this. Can you reproduce the same error with another radix subtheme?

Comment #4

AaronELBorg CreditAttribution: AaronELBorg commented 2 January 2017 at 20:35

Hmmm, looking into this. Can you reproduce the same error with another radix subtheme?

I have to admit that I installed the Radix theme out of my sheer curiosity surrounding using Gulp within a drupal site. I'm far from being a Radix expert...

So do you mean, just reinstalling Radix and doing the whole Drush song-n-dance to create my own subtheme?

Thanks.

Comment #5

shadcn CreditAttribution: shadcn at Chapter Three commented 3 January 2017 at 18:54

I mean if you try creating a new subtheme with drush radix mysubtheme, do you see the same error?

Comment #6

Eram Fatima18 CreditAttribution: Eram Fatima18 at TO THE NEW commented 2 August 2022 at 17:48

1- Replace gulp-minify-css with gulp-clean-css
2-npm install gulp-clean-css --save-dev
3- use sass version 2.3.2

example:
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');

use
.pipe(cleanCSS({ compatibility: 'ie8' })) in gulp task

example-
gulp.task('styles', () => {
return gulp.src('src/scss/*.scss', { sourcemaps: true })
.pipe(sass().on('error', sass.logError))
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(gulp.dest('dist/css/'));
});

gulp.task('watch', () => {
gulp.watch('scss/**/*.scss', (done) => {
gulp.series(['clean', 'styles']), (done);
});
});

gulp.task('default', gulp.series(['clean', 'styles']));