simPod simPod - 26 days ago 10
Sass (Sass) Question

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

Answer

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.

Comments