We are using gulp-sass to compile our SCSS, and using gulp-sourcemaps to generate sourcemaps in our dev environment:
...
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.init()))
.pipe(plugins.sass({
outputStyle: "nested"
}))
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.write("./")))
...
Sourcemaps get generated, no issues. When inspecting elements in Chrome DevTools, we can see the source SASS definition, but as soon as we modify an attribute value or selection, we lose the sourcemap and are shown the line in the compiled CSS. See screenshots:
Very annoying and nothing we've tried has fixed this. Any suggestions? Note that in Firefox, we do not see the same issue.
Crux : You cannot modify scss rules properties inside the inspect element panel of chrome devtools. However, we can edit the source files (sass/scss) inside source panel of the chrome using chrome workspaces.
I had a the same problem. I had to scratch my head for a whole day to figure it out the problem and make my sass/scss editable in the browser.Here it goes:
1.) Sourcemaps are meant for referencing your source files not editing your source files (sass/scss) so that you can debug your code.
i.e we can refer the the exact line which caused our compiled css rule but not edit it
2.) Chrome does it right by immediately replacing your scss rules with compiled css because chrome works with css. It doesn't compile your scss.
Also When you make any change to the css rule, this rule is also modified in the source file (.css ) also in chrome sources tab. That means the changes we make in the inspector are directly mapped with our css files.
For eg: when I change some property in the inspector it is also changed in the css source file.
Initially
Inspector
Source File
After Changing the property
Inspector
Source File
3.) Regarding Firefox, you might be thinking its working in the case of firefox but i think its a bit misleading. Its misleading because firefox doesn't change anything in any source file ( neither css nor scss ) so we don't know what they actually did, whether they actually compiled our scss file or they used css under the hood.
When I say source files it means files present in the source panel of the chrome and style editor in the firefox
4.) Finally, If you really want to edit you sass/scss files on the fly in the source panel of the chrome you've got to look into chrome workspaces. But then again you wont be able to make changes to scss rules properties in the inspect elements tab.
** Again, using chrome workspaces doesn;t actually compiles our scss into css in the browser what actually happens is that the browser maps our files ( in source tab ) to system files ( sort of makes the browser our code editor )
Related
I have a weird issue. I have a website project that I am currently working and I am am using node sass. While in the IDE, I am using VS Code, everything is fine and the styles are there. If I open the html file outside of the VS Code the css disappears for some reason. The css gets compiled fine and the .css file is there. The link tag points to it just fine, but no styles and no images either. Have I missed something in the setup of my project that would cause these issues when opening the html file externally?
Im using SCSS preprocessor (Sass, Compass => SCSS style) with Sublime Text 3 and build system to create css file, it also generates *.map (source-map with original destination of all scss files).
I see too strange behavior.
See screenshot:
(for example: element header and his location is in other file then google chrome showing).
Sometimes google chrome shows up the correct location, see
,but mostly bad.
Source map is here
Any help?
I want to build an entire layout directly from chrome dev tools. So I came over workspaces in chrome dev tools.
But there are 2 limitations I'm facing after I map styles and html to file system resource
If I do some html change from elements panel - like edit html or delete a node - it is not mapped to my workspace html file so that I can save it - is there a way to see such changes??
After I've mapped by css file - and my local css file does not have a rule for a selector say
wrapper{ font-family:"Courier New"}
then I can't persist the change I make from elements panel by directly selecting an element.
See images below:
"Only styles defined in an external CSS file can be saved. Changes to element.style or to inline styles are not persisted. (If you have inline styles, they can be changed on the Sources panel.)"
From https://developers.google.com/web/tools/setup/setup-workflow:
I'm trying to get Chrome's DevTools to auto reload a page when I save a watched SCSS file which will compile and make changes to the CSS file.
I have the Auto-reload generated CSS option checked, but sadly, it isn't working as expected.
Whenever I make changes to the SCSS file and save it, the page doesn't reload. I have added my working folder to the workspace and also mapped the files (both the SCSS file and the generated CSS) to their respective versions on my local system drive. This, however, doesn't help.
The SASS source maps seems to be working fine as the scss files are reflected in the DevTools inspector:
I'm using Chrome version 31:
Have I missed out anything that I don't know of? What else do I have to do to get this to work?
I used drupal in this case and drupal generate css link like 'style.css?abc'. Problem in this suffix '?abc'. You need to start file mapping from LOCAL (press right-click on local) 'style.css' to WEB 'style.css?abc' (shown in list). Not from WEB to LOCAL. If result is correct WEB-links disappears from list in 'resourses' tab.
here is a good solution, to avoid this mapping issue of .css?201203241721 / .js?201203241721-files as szdv mentioned with drupal. I have had it with typo3 and this solved it:
/* remove in production *************************************************/
//filter typo3 temp file src/href with ?date ending for chrome workspaces
$('script, link').each(function(){
rpString = /\?[0-9]*/;
if(this.src){
this.src = this.src.replace(rpString,'');
}
if(this.href){
this.href = this.href.replace(rpString,'');
}
});
/* ******************** *************************************************/
After setting up source maps for my scss files, and getting sass debugging up and running for canary, I'm hitting a small but frustrating snag. When I first load or reload the page and inspect an element, I get a reference to the .scss file in the Matched CSS Rules window. screenshot 1.
When I go to switch up the styles, for instance changing the background color, as soon as I'm done making the change, the file path instantly changes to the compiled css file. screenshot 2. Any ideas for why this might be happening?
Indeed, when you modify the CSS, the source mapping between CSS and SCSS is broken, since it is no longer correct. To restore it, you should save the updated SCSS onto disk in the DevTools Sources panel (with sass running in the watch mode) and have DevTools reload your CSS. Then your source mapping will be fine.