While surfing a website, being curious, I want to understand how some of the css is built.
So I open the devtools and inspect a specific element, on the right panels it shows me the css and a link to scss files, but I click on the name of the scss file then it seems to show me an empty file!
Any way to inspect the sass/scss files from a 3rd party website in devtools?
You can view the original SCSS file only if the sourcemap file is included in the site's files and have been uploaded.
Related
I have plenty of scss file in my MVC project.All of them imported to a single scss file then compile to a MainStyle.css. Inspect element just show css line and css file name.
Now when I want to change any style its not possible to find that scss file name in inspect element.
In addition show original sources in explorer not work.
You can enable source mapping when compiling from scss to css. You can check this article on that: https://www.sitepoint.com/using-source-maps-debug-sass-chrome/
Quick fix: You can go to the css line and copy the classname. Do a global search of wherever the classname is used. You should see the scss file along with what you're looking for
I just started using Prepros to compile my SCSS files and I can't seem to figure out how to enable live editing of those files in Chrome Developer Tools.
I'm not really sure how this is supported nowadays, but I've found some examples showing this in action (such as this video) and I know it used to be an experimental feature in earlier versions of Chrome.
In Prepros, I have Source Map enabled and the map is showing up in my filesystem properly.
Chrome is also showing all the SCSS files correctly, but I can't save any changes to the file system (basically, whenever I change something, it only changes in the compiled main.css file).
As you can see here, there are no green dots next to the SCSS files:
...and when I try to edit and save them in the Sources panel, this shows up:
Here's my Prepros project structure (everything gets compiled into the main.css file):
Is there any way to set this up so that I could edit anything in DevTools and save it to the file system from there? I want to avoid copying code over to my text editor as much as possible.
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.
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.
When I use an #import statement that imports from a node modules folder, the import works perfectly.
#import "../../node_modules/bulma-scss/scss/utilities/functions";
However once a user goes to edit the theme via the backoffice theme editor and saves the changes, there is an error basically saying that that node_modules folder does not exist.
Expected Result
Editing a .scss file via the backoffice editor and 'save and apply' would successfully update the corresponding .css file used in the theme
Actual Result - https://www.screencast.com/t/RluUCmMq7Iqa
A string of 'file doesn't exist' errors occurs as the "#import" statements reference files used in the node modules folder
Video of issue explained: 1min 40s https://www.screencast.com/t/D4CvGQkk0cl
node_modules are available in the theme, but are not available when editing in the browser. The reason for this is that during "bundling", the contents of node_modules is converted into a different format and placed inside the /parsed directory.
When editing a theme in the control panel of a store, the contents of the /parsed directory/node_modules is not available to edit and not otherwise accessible.
I would recommend including the file through a non-package manage method in order to address this.
I have a very basic rails application in which I've added compass and zurb foundation to. I've noticed an issue that now when I save changes to any stylesheet, which I'm using scss for, I also have an additional css file with the same name but .css instead of .scss added to the stylesheets directory. This causes a problem because my layout templates then try to use the application.css file instead of the application.scss file.
Has anyone had this happen and how can I get it to stop adding .css files to my stylesheets directory?
In my foundation_and_overrides.scss file the content is the standard zurb foundation content.
However, in the foundation_and_overrides.css file the contents are:
https://gist.github.com/iambca/5084463
Found the issue here: Auto compile SCSS files in Sublime Text 2
I still don't have a solution but this is the issue. Sublime Text 3 is coming so perhaps this will be resolved in the new release.