How can I generate sass sourcemaps in Ionic CLI?

ionic-v1
1

Hello,

I was trying to generate SCSS sourcemaps by editing my gulpfile

var sourcemaps = require('gulp-sourcemaps');  

gulp.task('sass', function(done) {
  gulp.src('./www/scss/ionic.app.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({errLogToConsole: true}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

ionic CLI log showed this:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: ENAMETOOLONG, name too long(...)

Is there an other way to do this?

I’m using ionic CLI 1.6.1

Thanks!

2

I got this same error. I ended up telling it not to write the sourcemap(s) right into the generated CSS file, but as separate .map file(s) in the same directory, by specifying an output directory for sourcemaps to use. However, that caused another error; it complained that the Ionicons source SCSS file was not in the source directory. It turns out you need to specify a base directory if you are trying to use more than one file as the source. At first I thought that didn’t apply to Ionic, since Ionic’s input file is ./scss/ionic.app.scss, but since that file itself contains two separate inputs, one for Ionicons and the other for the SCSS files, it apparently counts as more than one input file as far as gulp is concerned. So my entire block for Ionic’s sass processing in gulp is now:

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss', {base: './www/lib/ionic/scss'})
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

This causes gulp to output .map files in the same directory it outputs the CSS files in (here it is just the default ./www/css directory).

This is assuming you have added a line at the top of the file defining the sourcemaps variable:

var sourcemaps = require('gulp-sourcemaps');

And this is also assuming you have installed gulp sourcemaps with

npm install gulp-sourcemaps --save-dev

from the command prompt or shell prompt.

3

Hi!,
thanks for your response,
I’ve changed my gulp file, but now I’m getting this error:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Broken @import declaration of "\app/menu\"

I’m importing several scss to my ionic.app.scss.

My project directory:

app
|_www
  |_lib
  | |_ionic
  |   |_scss
  |_css
  | |_ionic.app.css
  |_scss
    |_ionic.app.scss
    |_app
      |_menu.scss

and my gulpfile looks like this:

var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function(done) {
      gulp.src('./www/scss/ionic.app.scss', {base: './www/lib/ionic/scss'})
        .pipe(sourcemaps.init())
        .pipe(sass({errLogToConsole: true}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./www/css/'))
        .pipe(minifyCss({
          keepSpecialComments: 0
        }))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(gulp.dest('./www/css/'))
        .on('end', done);
    });

What can i do?
Should I add another base directory? If I do, how do i do it?

Thanks again

4

I’m also running into this and pulling my hair out - did you ever find a workaround?

5

Change the order a bit

gulp.task('sass', function(done) {
   gulp.src('./www/scss/ionic.app.scss', {base: './www/lib/ionic/scss'})
       .pipe(sourcemaps.init())
       .pipe(sass({errLogToConsole: true}))
       .pipe(minifyCss({
           keepSpecialComments: 0
       }))
       .pipe(rename({ extname: '.min.css' }))
       .pipe(sourcemaps.write('./'))
       .pipe(gulp.dest('./www/css/'))
       .on('end', done);
});
1 Like