Search code examples
cssgoogle-chromesassgoogle-chrome-devtoolscompass

How to make CSS sourcemapping work in Chrome with Compass (SASS)

the thing is that I'm trying to get CSS mapping working with my Compass project in Chrome (v38, OS X) so It reloads my CSS without the need to reload page.

I followed this https://developer.chrome.com/devtools/docs/css-preprocessors and also this http://www.sitepoint.com/using-source-maps-debug-sass-chrome/

I have fully working Compass project and I'm compiling using compass watch.

Into Config.rb I have added sourcemap = true and .map file has been successfully created.

When I load my site, I can see .map file loaded in Network tab in Console (status code 200)

Enable CSS source maps and Auto-reload generated CSS is also on in Chrome's Settings.

But when I recompile css changes don't appear in DevTools nor in page. However when I reopen DevTools I can see changes in Styles tab but they're not applied into page.

So, to sum up:

  • I have no problems with Compass compilation etc.
  • .map file is compiled and loaded through my HTTP server with 200 OK response
  • I can see .scss references in Style inspector eg. body {...} style.scss:18 so Chrome communicated with my .map file
  • When my SCSS is compiled, changes appear in DevTools only when I reopen it
  • After reopening, I can see CSS changes in Style tab but they're not applied into my page

Any ideas what might be the issue here? Thanks

Solution

  • You've missed a few steps :

    Chrome < 53

    1. Enable CSS source maps in Chrome (DevTools > Settings > Preferences)
    2. Enable auto-reload generated CSS source map in Chrome (DevTools > Settings > General)
    3. Add your project folder in the Chrome workspace (DevTools > Settings > Workspace)
    4. Chrome ask you for a full access to this folder, accept
    5. In the Sources tab, find your generated CSS file, right click on it and choose Map to network ressource, and select the same file name in the shown dropdown
    6. Chrome ask you to reload DevTools, accept

    Chrome >= 53

    1. Enable CSS source maps in Chrome (DevTools > Settings > Preferences > Sources)
    2. In the Sources tab, right click anywhere and choose Add folder to workspace, and select your project folder.
    3. Chrome ask you for a full access to this folder, accept
    4. In the Sources tab, find your generated CSS file, right click on it and chosse Map to file system ressource, and select the same file name in the shown dropdown

    Now, you can change your Sass file in your favorite editor (you then need to watch it, or relaunch sass command), or directly in Chrome Devtools: select your file, edit it and save it.