# Sourcemaps no longer working as expected with Sage update

**URL:** https://discourse.roots.io/t/sourcemaps-no-longer-working-as-expected-with-sage-update/3022
**Category:** sage
**Created:** 2015-03-02T01:35:34Z
**Posts:** 52

## Post 1 by @ryanmclaughlin — 2015-03-02T01:35:35Z

Hey guys - first off, thanks for all the great work with Roots/Sage. I have used Roots for a couple of projects now and am excited to give Sage a go.

I am just getting started here, but right away I am noticing some odd behavior with the css sourcemaps.

Specifically, in the Firefox inspector rules are not linked to their actual less source files, but rather main.css:

![](https://discourse.roots.io/uploads/default/1689/07691da449da4f66.png)

This is especially odd since the network tab confirms that the sourcemap has been successfully loaded and the style editor tab manages to pull in all of my source less files.

In the Chrome inspector, _most_ rules are successfully linked to their less source, but main.css still lingers for a few of them:

![](https://discourse.roots.io/uploads/default/1690/48b5918bd6f0d369.png)

Interestingly, the pseudo before and after rules in that picture from scaffolding.less and main.css are actually the same rule…

Any ideas what might be going on here?

For reference, I am running Win7, Chrome 40.0.2214.115, Firefox 36.

Thanks.

---

## Post 2 by @drawcardau — 2015-03-02T14:28:17Z

I had this issue as well a while back, I think I just deleted the generated .map file and let it rebuild, and it seemed to fix itself.

---

## Post 3 by @ryanmclaughlin — 2015-03-02T18:35:19Z

Thanks for the suggestion. This was actually the first thing I tried. The next was to grab a fresh copy of Sage. Unfortunately, neither worked.

---

## Post 4 by @drawcardau — 2015-03-02T22:33:41Z

Have you tried turning on the development environment in Wordpress? map files won’t show up if you’re in production mode.

Drop this in `wp-config.php`:

```
define('WP_ENV', 'development');
```

---

## Post 5 by @ryanmclaughlin — 2015-03-03T04:07:39Z

Yes, this is defined.

And I sort of touched on this in my original post but I have confirmed that the sitemap is actually downloaded. Additionally if I look in the dev tools style editor all of the original source files are there.

So to an extent, the sourcemap is working. It just isn’t working in the element inspector.

Actually after taking another look at this I just realized that the first file listed in the sourcemap sources property is main.css. The same goes for sourcesContent (that is, the entire unminified contents of main.css).

Should the compiled stylesheet be in the sourcemap like this?

---

## Post 6 by @bigskinnyboy — 2015-03-04T10:48:05Z

I’m having this exact same issue, source maps are being generated, WP\_ENV is set for development but console is still showing just a link to main.css. The source map file looks like it is being generated correctly.

---

## Post 7 by @wglassbrook — 2015-03-04T13:29:46Z

I too am having a similar experience. Source maps are being generated and are recognized by dev tools. The content of the source map is incorrect. Removing and regenerating does not correct the issue.

---

## Post 8 by @austin — 2015-03-04T14:05:26Z

Anyone got a reduced test case? something simple like

```
var gulp = require('gulp');
var plugin1 = require('gulp-plugin1');
var plugin2 = require('gulp-plugin2');
var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('javascript', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(plugin1())
      .pipe(plugin2())
    .pipe(sourcemaps.write('../maps'))
    .pipe(gulp.dest('dist'));
});
```

But less instead of JS of course. And see if _that_ works? If reduced test case doesn’t work then it’s an issue with gulp-sourcemaps.

Also completely separate from sage try cloning down [https://github.com/floridoo/gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) and run the tests with `npm test`.

---

## Post 9 by @ryanmclaughlin — 2015-03-04T17:35:09Z

Hey Austin,

Reduced test case using only gulp, gulp-less and gulp-sourcemaps seems to be working fine.

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

gulp.task('default', function() {
  gulp.src('styles/*.less')
    .pipe(sourcemaps.init())
      .pipe(less())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('styles'));
});
```

However, the sourcemaps test fails immediately saying that it can’t open \*.js and test/\*.js.

---

## Post 10 by @hugolach — 2015-03-05T21:58:17Z

Hi,

I’ve used roots theme for a couple project, and now it’s my first time with Sage theme.  
My problem is that my css is always minified, so I can’t get my sourcemap working with the inspector.  
I’ve put the define(‘WP\_ENV’, ‘development’); in my wp-config  
And when I do gulp watch, the css is compiled in /dist/styles/main.css and there is a main.css.map.  
But the main.css is minified so the inspector always show line 1.

Here is my gulpfile [http://pastebin.com/esTEZdju](http://pastebin.com/esTEZdju)

Anyone have an idea?

Thank you!

---

## Post 11 by @mikespainhower — 2015-03-05T21:39:45Z

The css is supposed to be minified…the purpose of the sourcemap is to translate the rules from the mininfied .css file to the original source (less/sass) file. So, minified css is not your problem.

Do you see errors in your console or network tab? Do you have sourcemapping configured in the dev tools? Which browser are you using?

---

## Post 12 by @hugolach — 2015-03-05T21:49:33Z

Hi, thanks for the answer.

I have no errors in network tab, and the sourcemap is correctly loaded in the network/others tab.  
I use google chrome, and yes the -“Enable CSS source maps” - “Auto-reload generated CSS” options are checked  
I’ve tried with firefox and it also don’t work…

Any other idea?

---

## Post 14 by @hugolach — 2015-03-05T22:11:55Z

I’ve tried with [http://localhost:3000/](http://localhost:3000/) [http://localhost:8888/](http://localhost:8888/) and [http://127.0.0.1:8888/](http://127.0.0.1:8888/) (for mamp on mac)  
and both don’t work

---

## Post 16 by @ryanmclaughlin — 2015-03-06T22:39:10Z

a quick update for anyone still having trouble with the css sourcemap…

i haven’t been able to find much time to look into it, but it seems to be a problem with gulp-pleeease. i have confirmed this in the earlier reduced test case requested by @austin as well as within sage by simply removing gulp-pleeease altogether.

i am working around this issue for now simply by replacing gulp-pleeease with gulp-autoprefixer and gulp-minify-css. it isn’t ideal since they don’t cover the full feature set of pleeease, but it works for now.

additionally i have found that i needed to update sourcemaps.write as follows:

```
return $.if(enabled.maps, $.sourcemaps.write('.', {
  includeContent: false,
  sourceRoot: '/assets/themes/[theme-name]/dist'
}));
```

---

## Post 17 by @drew — 2015-03-09T13:50:12Z

My experience of the problem is the same as ryanmclaughlin. With Pleeease disabled sourcemaps appears to work just fine but as soon as I bring it back into the pipe the line numbers reported for every element are the same.  
Not sure what other options I could change on the Pleeease pipe to get it playing ball.

---

## Post 18 by @drew — 2015-03-09T15:27:48Z

Well I’ve just managed to get this one sorted for me.  
In the gulpfile just bellow the browsers argument to please I’ve added

```
minifier: argv.production,
```

This in effect switches minification on and off depending on our environment. And as it turns out it’s the minification of the css prior to sourcemaps running thats causing the issue.

---

## Post 19 by @austin — 2015-03-09T17:15:34Z

Possibly related: [https://github.com/danielhusar/gulp-pleeease/issues/6#issuecomment-62256074](https://github.com/danielhusar/gulp-pleeease/issues/6#issuecomment-62256074)

---

## Post 20 by @slobich — 2015-03-10T12:16:28Z

i’m having the same issue as @hugolach. i have the source map but it’s referring to the minified css and not less files. i’m on Windows 7 (64 bit) and i’m using Bedrock 1.3.3, Sage 8.0.1, node 0.12.0, npm 2.6.0, bower 1.3.12, gulp 3.8.11. i tried to delete the maps and rebuild but it doesn’t work. also tried the fix that @drew posted but it didn’t work.

@drew do you mind sharing your gulpfile? i’m not 100% sure i did it right so i just want to check against my gulpfile. thnx.

---

## Post 21 by @drew — 2015-03-11T09:57:32Z

Hi @slobich,

Don’t mind sharing atall. I’m currently compiling sass but I’m not sure it would matter if the variable was moved into the less pipe.

```
// ## Globals
    /*global $:true*/
    var $ = require('gulp-load-plugins')();
    var argv = require('yargs').argv;
    var browserSync = require('browser-sync');
    var gulp = require('gulp');
    var lazypipe = require('lazypipe');
    var merge = require('merge-stream');
    
    // See https://github.com/austinpray/asset-builder
    var manifest = require('asset-builder')('./assets/manifest.json');
    
    // `path` - Paths to base asset directories. With trailing slashes.
    // - `path.source` - Path to the source files. Default: `assets/`
    // - `path.dist` - Path to the build directory. Default: `dist/`
    var path = manifest.paths;
    
    // `config` - Store arbitrary configuration values here.
    var config = manifest.config || {};
    
    // `globs` - These ultimately end up in their respective `gulp.src`.
    // - `globs.js` - Array of asset-builder JS dependency objects. Example:
    // ```
    // {type: 'js', name: 'main.js', globs: []}
    // ```
    // - `globs.css` - Array of asset-builder CSS dependency objects. Example:
    // ```
    // {type: 'css', name: 'main.css', globs: []}
    // ```
    // - `globs.fonts` - Array of font path globs.
    // - `globs.images` - Array of image path globs.
    // - `globs.bower` - Array of all the main Bower files.
    var globs = manifest.globs;
    
    // `project` - paths to first-party assets.
    // - `project.js` - Array of first-party JS assets.
    // - `project.css` - Array of first-party CSS assets.
    var project = manifest.getProjectGlobs();
    
    // CLI options
    var enabled = {
      // Enable static asset revisioning when `--production`
      rev: argv.production,
      // Disable source maps when `--production`
      maps: !argv.production,
      // Fail styles task on error when `--production`
      failStyleTask: argv.production
    };
    
    // Path to the compiled assets manifest in the dist directory
    var revManifest = path.dist + 'assets.json';
    
    // ## Reusable Pipelines
    // See https://github.com/OverZealous/lazypipe
    
    // ### CSS processing pipeline
    // Example
    // ```
    // gulp.src(cssFiles)
    // .pipe(cssTasks('main.css')
    // .pipe(gulp.dest(path.dist + 'styles'))
    // ```
    var cssTasks = function(filename) {
      return lazypipe()
        .pipe(function() {
          return $.if(!enabled.failStyleTask, $.plumber());
        })
        .pipe(function() {
          return $.if(enabled.maps, $.sourcemaps.init());
        })
          .pipe(function() {
            return $.if('*.less', $.less());
          })
          .pipe(function() {
            return $.if('*.scss', $.sass({
              outputStyle: 'nested', // libsass doesn't support expanded yet
              includePaths: [
    		    './node_modules/susy/sass',
    		    './node_modules/compass-mixins/lib'
    		  ],
              precision: 10,
              errLogToConsole: !enabled.failStyleTask
            }));
          })
          .pipe($.concat, filename)
          .pipe($.pleeease, {
              browsers: [
                'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4',
                'opera 12'
              ],
              minifier: argv.production,
          })
        .pipe(function() {
          return $.if(enabled.rev, $.rev());
        })
        .pipe(function() {
          return $.if(enabled.maps, $.sourcemaps.write('.'));
        })();
    };
    
    // ### JS processing pipeline
    // Example
    // ```
    // gulp.src(jsFiles)
    // .pipe(jsTasks('main.js')
    // .pipe(gulp.dest(path.dist + 'scripts'))
    // ```
    var jsTasks = function(filename) {
      return lazypipe()
        .pipe(function() {
          return $.if(enabled.maps, $.sourcemaps.init());
        })
        .pipe($.concat, filename)
        .pipe($.uglify)
        .pipe(function() {
          return $.if(enabled.rev, $.rev());
        })
        .pipe(function() {
          return $.if(enabled.maps, $.sourcemaps.write('.'));
        })();
    };
    
    // ### Write to rev manifest
    // If there are any revved files then write them to the rev manifest.
    // See https://github.com/sindresorhus/gulp-rev
    var writeToManifest = function(directory) {
      return lazypipe()
        .pipe(gulp.dest, path.dist + directory)
        .pipe(function() {
          return $.if('**/*.{js,css}', browserSync.reload({stream:true}));
        })
        .pipe($.rev.manifest, revManifest, {
          base: path.dist,
          merge: true
        })
        .pipe(gulp.dest, path.dist)();
    };
    
    // ## Gulp tasks
    // Run `gulp -T` for a task summary
    
    // ### Styles
    // `gulp styles` - Compiles, combines, and optimizes Bower CSS and project CSS.
    // By default this task will only log a warning if a precompiler error is
    // raised. If the `--production` flag is set: this task will fail outright.
    gulp.task('styles', ['wiredep'], function() {
      var merged = merge();
      manifest.forEachDependency('css', function(dep) {
        var cssTasksInstance = cssTasks(dep.name);
        if (!enabled.failStyleTask) {
          cssTasksInstance.on('error', function(err) {
            console.error(err.message);
            this.emit('end');
          });
        }
        merged.add(gulp.src(dep.globs, {base: 'styles'})
          .pipe(cssTasksInstance));
      });
      return merged
        .pipe(writeToManifest('styles'));
    });
    
    // ### Scripts
    // `gulp scripts` - Runs JSHint then compiles, combines, and optimizes Bower JS
    // and project JS.
    gulp.task('scripts', ['jshint'], function() {
      var merged = merge();
      manifest.forEachDependency('js', function(dep) {
        merged.add(
          gulp.src(dep.globs, {base: 'scripts'})
            .pipe(jsTasks(dep.name))
        );
      });
      return merged
        .pipe(writeToManifest('scripts'));
    });
    
    // ### Fonts
    // `gulp fonts` - Grabs all the fonts and outputs them in a flattened directory
    // structure. See: https://github.com/armed/gulp-flatten
    gulp.task('fonts', function() {
      return gulp.src(globs.fonts)
        .pipe($.flatten())
        .pipe(gulp.dest(path.dist + 'fonts'));
    });
    
    // ### Images
    // `gulp images` - Run lossless compression on all the images.
    gulp.task('images', function() {
      return gulp.src(globs.images)
        .pipe($.imagemin({
          progressive: true,
          interlaced: true,
          svgoPlugins: [{removeUnknownsAndDefaults: false}]
        }))
        .pipe(gulp.dest(path.dist + 'images'));
    });
    
    // ### JSHint
    // `gulp jshint` - Lints configuration JSON and project JS.
    gulp.task('jshint', function() {
      return gulp.src([
        'bower.json', 'gulpfile.js'
      ].concat(project.js))
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish'))
        .pipe($.jshint.reporter('fail'));
    });
    
    // ### Clean
    // `gulp clean` - Deletes the build folder entirely.
    gulp.task('clean', require('del').bind(null, [path.dist]));
    
    // ### Watch
    // `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
    // changes across devices. Specify the hostname of your dev server at
    // `manifest.config.devUrl`. When a modification is made to an asset, run the
    // build step for that asset and inject the changes into the page.
    // See: http://www.browsersync.io
    gulp.task('watch', function() {
      browserSync({
        proxy: config.devUrl,
        snippetOptions: {
          whitelist: ['/wp-admin/admin-ajax.php'],
          blacklist: ['/wp-admin/**']
        }
      });
      gulp.watch([path.source + 'styles/**/*'], ['styles']);
      gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']);
      gulp.watch([path.source + 'fonts/**/*'], ['fonts']);
      gulp.watch([path.source + 'images/**/*'], ['images']);
      gulp.watch(['bower.json'], ['wiredep']);
      gulp.watch('**/*.php', function() {
        browserSync.reload();
      });
    });
    
    // ### Build
    // `gulp build` - Run all the build tasks but don't clean up beforehand.
    // Generally you should be running `gulp` instead of `gulp build`.
    gulp.task('build', ['styles', 'scripts', 'fonts', 'images']);
    
    // ### Wiredep
    // `gulp wiredep` - Automatically inject Less and Sass Bower dependencies. See
    // https://github.com/taptapship/wiredep
    gulp.task('wiredep', function() {
      var wiredep = require('wiredep').stream;
      return gulp.src(project.css)
        .pipe(wiredep())
        .pipe($.changed(path.source + 'styles', {
          hasChanged: $.changed.compareSha1Digest
        }))
        .pipe(gulp.dest(path.source + 'styles'));
    });
    
    // ### Gulp
    // `gulp` - Run a complete build. To compile for production run `gulp --production`.
    gulp.task('default', ['clean'], function() {
      gulp.start('build');
    });
```

---

## Post 22 by @slobich — 2015-03-11T15:12:41Z

hey @drew, thnx for the share. i’ll try it out and report back here.

---

## Post 23 by @casey — 2015-03-12T14:43:49Z

Thanks for posting this. It fixed the problem for me, at least.

---

## Post 24 by @slobich — 2015-03-12T19:17:28Z

i’ve applied the fix from @drew and it’s better but not working as it should. when i run `gulp` i get the source maps from bootstrap files but the reference line number is wrong. IE: `<body>` element is referenced as `sacaffolding.less:24` when it should be `sacaffolding.less:27`. so it’s off by 3 lines. but it gets the file right. but when using theme `.less` files like `_global.less` than the source maps reference completely the wrong file: IE: if i add `background-color: red;` on `<body>` in `_global.less` the source map points to `_grid.less:4`.

---

## Post 25 by @stueynet — 2015-03-15T13:09:13Z

Any other possible fixes for this? @drew’s fix didn’t work for me. Also I will add that having added fontawesome and slick.js via bower, in my console it shows the filename as font-awesome.css or slick.css depending on which one was installed via bower first.

Photo of my console below.

![](https://discourse.roots.io/uploads/default/1759/c1c53fd72fdbff10.jpg)

---

## Post 26 by @stueynet — 2015-03-17T12:56:32Z

Just thought I would follow up again here. I tried doing a plain vanilla install just to make sure it wasn’t some configuration change I made. Here are the steps:

1. Install WordPress
2. Pull Sage
3. npm install
4. bower install
5. Update assets/manifest.json with local url
6. Run gulp && gulp watch
7. Change a style via layouts/\_header.less (in this case the background  
of .banner)
8. Inspect it in chrome
9. Hang head as source maps do not display the original less file

I badly need to get this working. I just started my first major project using sage and not roots and this is really causing me issues. Any help would be appreciated.

---

## Post 27 by @stueynet — 2015-03-17T15:23:38Z

Perhaps this issue is the reason? All the partial less files do start with underscores. I have no clue.

> <https://github.com/austinpray/asset-builder/issues/27>
>
> Excuse for my poor english. Good job! Thank you, Austin.
> this wont work
> "slick.css": {
> "files": [
> "../bower_components/slick.js/slick/_slick.scss",
> "../bower_components/slick.js/slick/_slick-theme.scss"
> ]
> }
> this works
> "slick.css": {
> "files":...

---

## Post 28 by @djmtype — 2015-03-18T03:47:50Z

Since Sage v8.10, there’s no more Sass sourcemap! It’s being generated inside `dist > styles`. But, Web Inspector just sees main.css.

---

## Post 29 by @slobich — 2015-03-18T03:55:28Z

i’ve noticed that my main.css file has the whole source map file at the bottom encoded with base64 in the `sourceMappingURL`, and after that there is another `sourceMappingURL` with the map file name. here is the [file](https://gist.githubusercontent.com/slobich/f2bc09f4405a37a83517/raw/21dc280d2b920f0f41c85d15c5715bb43248416c/gistfile1.txt). after the minfied css there is a huge block of code. i ran it to base64 decode and realized it was the source map. it’s on two sites i’m working on now that use Sage 8.0.1 and i pulled the latest version of Sage (8.1.0.) and all have the same “issue”. so my question is: is this an issue or is this how it’s supposed to be? i know that older Roots versions didn’t compile source maps like that and that the `sourceMappingURL` only referenced the file name. i tried `gulp` and `gulp watch` and both have the same results. `gulp --production` compiles normal minified styles without source maps (i presume this is expected because source maps are disabled on `gulp --production`). i’m on Windows 7 (64 bit), node 0.12.0, npm 2.6.0, bower 1.3.12, gulp 3.8.11. also… don’t know if this is related in some way to [this post](https://discourse.roots.io/t/sourcemaps-no-longer-working-as-expected-with-sage-update/3022).

---

## Post 30 by @kalenjohnson — 2015-03-16T21:58:53Z

I’m not seeing this on a project I am using Sage on. Last line is `/*# sourceMappingURL=main.css.map */` with CSS above it in `dist/main.css`.

Have you modified the gulpfile at all?

---

## Post 31 by @slobich — 2015-03-16T22:08:39Z

no. i didn’t modify the file at all on all the sites. i also have the line `/*# sourceMappingURL=main.css.map */` but i just have one line before that but instead of the map file name reference i have the source map encoded. it looks like this: `/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjoz ... */`. i’m also experiencing the issue with source maps not referencing the right file and line number that i posted on the topic i referenced on my first post.

---

## Post 32 by @kalenjohnson — 2015-03-16T22:13:08Z

Looks like it’s not happening on the project I’m working on, but it is happening on a fresh Sage install. Now to investigate

---

## Post 33 by @kalenjohnson — 2015-03-16T22:31:43Z

Since this looks like an actual bug, I’ve opened it on Github: [https://github.com/roots/sage/issues/1386](https://github.com/roots/sage/issues/1386)

---

## Post 34 by @austin — 2015-03-18T06:39:11Z

Hey all,

I’m investigating a fix that allows us to use [csswring](https://github.com/hail2u/node-csswring) and still have correct sourcemap functionality. I need test data however. If you guys could please send me your stylesheets or reduced testcases either here or in a private message that will help to debug. Worst case scenario I just write my own css minifier and publish it lol.

---

## Post 35 by @slobich — 2015-03-18T09:35:33Z

hey @austin, i can send whatever you need. just to point out that i tried a new Sage (8.1.0) install with no edits in the styles. I just compiled the CSS and JS with no edits in `.less` other than the default ones that Sage has (grid, brand …). so i don’t think anything i do in the styles has any effect on the issue. [here are the files](https://www.dropbox.com/s/7bqj2b8dazffmnm/files.zip?dl=0) (i’ve uploaded both assets and dist folders). if you need anything else let me know. thnx for your help.

---

## Post 36 by @stueynet — 2015-03-18T11:25:22Z

@ben has a fix here:

> <https://github.com/roots/sage/issues/1386#issuecomment-82745549>
>
> https://discourse.roots.io/t/sourcemaps-no-longer-working-as-expected-with-sage-update/3022
> I just confirmed with a fresh Sage install that the source maps are being written directly into the main.css file as...

trying to debug. disabling pleeease’s minification makes the sourcemap work as expected:

```
.pipe($.pleeease, {
    minifier: false,
    autoprefixer: {
      browsers: [
        'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4',
        'opera 12'
      ]
    }
  })
```

---

## Post 37 by @stueynet — 2015-03-18T11:31:25Z

It seems to fix it but first delete the old source maps.

---

## Post 38 by @slobich — 2015-03-18T11:45:37Z

doesn’t work for me… tried disabling pleeease’s minification (with and without and deleting the old source maps). it does change how the issue behaves. i’ve posted more details on the GitHub issue page.

---

## Post 39 by @bebat — 2015-03-18T12:14:21Z

Having same issue withe sage and less…  
Adding “minifier: false,” doesn’t fix but let you inspect less files with wrong line numbers…  
We really need help from Roots guys,  
this is a very embarrassing issue.  
Thanks

---

## Post 40 by @Foxaii — 2015-03-18T15:13:10Z

> [@bebat](#):
>
> We really need help from Roots guys, this is a very embarrassing issue.

We’re not embarrassed by Sage at all. In fact we’re all really proud of what’s been achieved. Sage brings together umpteen different tools (most with multiple additional dependencies) and modernises WordPress theme development in a way no other starter theme can.

As with any complex software it relies on a multitude of dependencies, so the trade off is you will occasionally get issues that can’t be resolved instantly. This doesn’t mean we’re not working on it. It just means that we haven’t had the time in amongst our full time jobs to fix it yet.

If you need source maps working instantly, just remove the gulp-pleeease task from the gulp file and handle prefixing yourself.

---

## Post 41 by @bebat — 2015-03-18T16:56:11Z

Sorry for my poor english I was only saying I am embarrassed for my work on CSS…  
I was not saying you were embarrassed for for Sage!  
I worked with roots for many projects so I know that you can be proud of Roots Sage Bedrock & co…  
I understand you need time to fix bugs and answer issues.  
I spent time trying to make this works without success and I just asked your help, simply because you built the app.

---

## Post 42 by @ben — 2015-03-18T17:20:10Z

Anyone following this thread might also want to subscribe to notifications on [https://github.com/roots/sage/issues/1386](https://github.com/roots/sage/issues/1386)

Latest update: [switching to pleeease 3.2.0 works for me](https://github.com/roots/sage/issues/1386#issuecomment-83062284)

---

## Post 43 by @ben — 2015-03-18T19:03:48Z

Committed a temporary fix into master:

> <https://github.com/roots/sage/pull/1388>

---

## Post 44 by @slobich — 2015-03-18T19:37:39Z

this fixed the issue for me. thnx @benword & @kalenjohnson for your help.

---

## Post 45 by @bebat — 2015-03-18T22:37:23Z

Issue fixed perfectly for me. Big thnx to Roots team for this live debugging :wink:

---

## Post 46 by @austin — 2015-03-30T19:03:52Z

Can you guys try this again with the latest version of pleeease? Remove `pleeease` from your package.json, delete your node\_modules directory and reinstall packages with `npm install`. That should give you pleeease 3.2.5 which has sourcemap fixes

---

## Post 47 by @kalenjohnson — 2015-03-30T19:29:37Z

I just verified that `pleeease` 3.2.5 is installed, but source maps are pointing to incorrect files and to `main.css` again.

---

## Post 48 by @austin — 2015-03-30T23:31:15Z

Specifically what though? What did you try, expect, and get?

---

## Post 49 by @austin — 2015-03-31T01:21:19Z

Got everything working over here: [https://github.com/austinpray/roots/tree/fixsourcemaps](https://github.com/austinpray/roots/tree/fixsourcemaps)

---

## Post 50 by @duncan — 2015-04-07T10:48:47Z

I am getting a 404 on that link

---

## Post 51 by @austin — 2015-04-07T12:35:26Z

It’s merged into master now

edit: this was the fix FYI: [https://github.com/roots/sage/commit/39caa2d391fb4d0fb0e8894517de259bcd6cc5ec#diff-b9e12334e9eafd8341a6107dd98510c9](https://github.com/roots/sage/commit/39caa2d391fb4d0fb0e8894517de259bcd6cc5ec#diff-b9e12334e9eafd8341a6107dd98510c9)

---

## Post 52 by @brett — 2016-01-30T00:57:48Z

So it’s like a year later and I’m not sure if this is the right place to post this, but it seems relevant since I managed to find “the answer” here.

I just installed a fresh Sage and the source maps weren’t working. I ran gulp and it appears to be working fine, but the source maps didn’t work. Upon further inspection, it was minifying CSS (thought I’m not sure if that’s the culprit, or just a coincidence).

So I set about trying to make it only minify the CSS when the `--production flag` is used. I ended up switching the minifyCss pipe call within cssTasks to:

```
.pipe(function() {
  return gulpif(enabled.failStyleTask, minifyCss({
    advanced: false,
    rebase: false
  }));
})
```

This appears to tie the minifyCss call in with failStyleTask, which itself appears to be tied to the `--production` flag. However, this thread indicates that the issue had been previously solved.

So, am I doing something wrong and should I not have needed to make this change? Or was this issue re-introduced at some point between then and now? I can’t seem to find any reference to this “$pleaseee” thing people keep mentioning.