Sourcemaps issue with font-awesome

sage
1

I have done some searching and seen this issue here: Source Maps being written twice · Issue #1386 · roots/sage · GitHub but it sounds as if it should be resolved in the latest version of Sage. I finally upgraded from Sage 8.0.0 to 8.2.1 and have now run into this issue. I have deleted node_modules and re-ran npm install. No errors from gulp. I have tried both injecting the font-awesome.scss into the build by editing bower.json (so wiredep will include it in main.scss), and just letting it reference the css file directly. When I have the font-awesome.css file loaded from bower_components, all my styles point to font-awesome.css:4 in Chrome dev tools. When I have it included in main.scss styles point to font-awesome.css:1. It is quite strange. I have the feeling I am just missing something since I did quite a lot of merging today to get up to 8.2.1 but I cannot think what it might be. Any ideas?

Also this is a development site hosted locally with bedrock-ansible, so WP_ENV is indeed being set to development. And main.css.map is being created in the dist/styles folder.

/*# sourceMappingURL=main.css.map */ Is located in the last line of main.css

2

Turns out this was not really an issue with FA. More a problem with SASS sourcemaps in general.

For some reason I needed to modify my gulpfile to the following:

.pipe(function() {
      return gulpif(enabled.maps, sourcemaps.write('.',
        {
          includeContent: false
        }));
    })();

This problem is/was not affecting JS at all. Only appeared since I moved from LESS to SASS. Can anyone give me an explanation for this?

1 Like
4

I can confirm broken Twitter Bootstrap 3.3.4 SASS sourcemaps on a fresh sage (8.2.1:head) install using Google Chrome.

I’m using:

return gulpif(enabled.maps, sourcemaps.write('.',
    {
      includeContent: false,
      sourceRoot: '../'
    }));

Switching to Twitter Bootstrap Less produced semi-working source maps. (similar to recent ‘fixed’ bug in regards to mis-matched line #'s)

When I brought Font Awesome back in; I couldn’t use the CSS file. Instead in bower.json overrides I had to make sure to specify the Less file to get it working correctly.

"fontawesome": {
  "main": [
    "./less/font-awesome.less",
    "./fonts/*"
  ]
}

Brining the CSS file in would break the sourcemap during wiredep. (or so it seemed to me, still learning!)