Sourcemaps no longer working as expected with Sage update

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:

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:

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.



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.

1 Like

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.

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');

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?

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.

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.

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() {

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 and run the tests with npm test.

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() {

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


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
But the main.css is minified so the inspector always show line 1.

Here is my gulpfile

Anyone have an idea?

Thank you!

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?

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?

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

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'

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.

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.

Possibly related:

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.

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
    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
    // ### 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: [
              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(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
    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(;
        if (!enabled.failStyleTask) {
          cssTasksInstance.on('error', function(err) {
        merged.add(gulp.src(dep.globs, {base: 'styles'})
      return merged
    // ### 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) {
          gulp.src(dep.globs, {base: 'scripts'})
      return merged
    // ### Fonts
    // `gulp fonts` - Grabs all the fonts and outputs them in a flattened directory
    // structure. See:
    gulp.task('fonts', function() {
      return gulp.src(globs.fonts)
        .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)
          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'
    // ### 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:
    gulp.task('watch', function() {
        proxy: config.devUrl,
        snippetOptions: {
          whitelist: ['/wp-admin/admin-ajax.php'],
          blacklist: ['/wp-admin/**']
      });[path.source + 'styles/**/*'], ['styles']);[path.source + 'scripts/**/*'], ['jshint', 'scripts']);[path.source + 'fonts/**/*'], ['fonts']);[path.source + 'images/**/*'], ['images']);['bower.json'], ['wiredep']);'**/*.php', function() {
    // ### 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
    gulp.task('wiredep', function() {
      var wiredep = require('wiredep').stream;
      return gulp.src(project.css)
        .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() {
1 Like

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