1

Like many developers I am using SASS as a preprocessor. I want to edit my stylesheets in Chrome. I've setup Source Maps to do this, and I know Chrome now supports SASS.

I have a SASS file, style.scss, used to create style.css used on the page. It's mainly just imports of other SASS files. Eg:

@import "colors";

Clicking an imported SASS file, like _colors.scss, it shows a green 'active' icon and shows it is linked to a source map.

However when I edit a SASS variable - like the $dark-blue in the screenshot below, where I've made it a red instead - the file doesn't change, nor does the page update.

enter image description here

How do I edit an imported SASS file in Chrome DevTools?

Edit: note the 'Linked to' on the imported file doesn't seem correct. The only way _colors.scss is used is part of style.scss which is turned into style.css. I suspect this is the cause of the problem. I've opened https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/349 to see if this is the case.

mikemaccana
  • 110,530
  • 99
  • 389
  • 494
  • It looks like you're trying to edit it from the Sources panel (which is the correct way to do it), so this should work. Any chance you can reduce this to a minimal example so that we can reproduce? – Kayce Basques Apr 18 '18 at 14:29
  • 1
    @KayceBasques I think the issue may actually be with gulp-sass / gulp-sourcemaps - which made the `import`ed file point to an incorrect sourcemap - rather than Chrome. See https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/349 – mikemaccana Apr 19 '18 at 08:35
  • Someone else’s problem... the best kind! Ping me here if it ends up being something on our end (the DevTools team). – Kayce Basques Apr 19 '18 at 14:47

0 Answers0