I am working with the developer console in chrome, and while working with the CSS I wonder why there are sass files loaded into the project. I am using the bulma framework and I have included the CSS file which does not have any reference to any sass file that I can see.
However it loads anyway, and it precedes inline styling aswell so its annoying.
Why is the sass files loaded and how do I prevent them from being loaded in the first place, does the browser natively support them?
I tried googling but didnt find a good answer.
ANSWER:
I am guessing it is "load sourcemaps" in the console that is the reason, so I have disabled it now.
Related
I am still getiing used to SCSS's 7-1 architecture. I can do control+f and find a particular class in my CSS file but sometimes I forget where it is coming from as I have multiple SCSS file following the 7-1 architecture.
Is there a way where I can locate which SCSS file the compiled CSS is coming from?
I am using Visual Studio Code.
You can use sourcemaps and then the developer tools inside your browser to see where things actually came from.
See this link
What is the most efficient way to style components in the browser dev tools with the default view encapsulation (emulated)?
My current workflow involves a lot of tedious copying and pasting from the dev tools like this:
Chrome dev tools has the ability to save styling changes made on the DOM to the source css file (Save Changes To Disk With Workspaces), but I don't know if this will work with the way Angular and Webpack use emulated component styles.
There's got to be a quicker workflow than what I am currently doing. Any tips?
You can directly edit your css project files from chrome devtools. Follow this steps:
In angular.json add "extractCss": true like so:
This way you'll see the css files in inspection instead of inner style tags in header
(you can see an example image in step 3 below).
Open chrome devtools, Sources tab, Filesystem left tab and add your project folder:
This is the magic trick, this will let you edit your local files from devtools!
now when you inspect your html for css, you can click the css file and you'll be redirected to your local file:
Edit your changes to the file.
Save the file.
Magic! Your local file was modified!
I LOVE Chrome!
Cheers
...I don't know if this will work with the way Angular and Webpack use emulated component styles.
TL;DR: You can't do this quite in the way you'd like to.
Angular scopes styles to components, and thus the .some-class-name[ngcontent-c5] notation in the Chrome inspector. As such, dev tools has no way of knowing exactly where to trace the change you made back to, other than the file it originated from using the source map.
As you mention in your question, you can load the project working directory into dev tools (article you posted) and edit the file itself. On save, the angular watcher will register the change and reload. This will work with pure css/js, as well as pre-compiler scss, ts, etc.
So to answer the question: yes, webpack will still recompile when you do that, but not quite in the way you're looking for.
I'm really confused about LESS, which is still new to me. Bootstrap uses it, and I can see references to it in Chrome's style inspector, making references to a grid-framework.less file, but when I go looking on the hard drive for it in my project, it's not there. How is that even possible? When I did a grep followed by cut command to find which file was referencing grid-framework.less, I found it was in two files: bootstrap/css/bootstrap.min.css.map and bootstrap/css/bootstrap.css.map. And there, as well, I have no idea what .map files are either. I have much to learn.
So, in general, please explain what .map files are, and then explain how these load the .less file, and then explain how .less files are loaded in the browser, and how far back do browsers go before they won't process .less stuff from Bootstrap 3?
My scss code stopped working. I identified the problem - two css files: custom.css.css and custom.css.css.map. I'm not using bootstrap, just ror. How do I make ruby ignore them? Or shouldn't I? The layout looks exactly the same, the code is easier to read (but not neat enough for my liking).
.map files are called source maps and they are used by browsers to display css files. I guess you are using SASS or LESS as you having a .map file generated. You may need to enable source maps in browsers to display the styles correctly. I hope following urls might help you.
Sass source files in Google Chrome
Sass Source Maps + Chrome = Magic
I have the rikaikun japanese translator and i made changes to the css folder, it runs good but after 2 seconds it tells me that the extension could be broken. How can i keep these simple css changes without breaking the extension? (I Modified the color values on the css file)
I copied the contents of the extension and loaded it again to chrome on development mode, now it doesn't crash.