So I'm working on a web project and I started with an HTML/CSS template created by someone else. It appears to use bootstrap which I don't know much about.
Upon using chrome developer tools I noticed that some of the css styles being applied were coming from scss files which I can not find on my system. I'm wondering where do these files exist?
The screenshots are from
Chrome dev tools that tells me the path to the scss file that is applying styles
That same path on my system where the scss folder was stated to be does not appear to exist. Notice that I'm in the "vendor" folder but there is no scss folder as dev tools shows there to be.
Can someone explain to me where the browser is loading these scss files from? I've tried having Windows display hidden files and folders and that doesn't make a difference. Thanks!
Path to scss file via Chrome Dev Tools:
That same path on my file system
It happened because of scss sourcemap. It generated when compile scss file to CSS, for easy debugging.
I assume you are using development version of bootstrap. If you using production version it's not happen.
You can find more information about this here
There may be files with .map extension (called as the source map in scss world) in your project path. These .map files refer to the path of the .scss files that were used during development to create .css files. So, even though there are no physical .scss files present in your context path; and your html file refers to the compiled .css file, Chrome debugger would still show the original .scss file from which the .css got compiled. If you require the Chrome debugger to show the actual .css file name, then you could delete the .map file temporarily. This suggestion is considering you would like to see the .css file name instead of the non-existent .scss files. You could also check this link to understand more about working with .scss files in Chrome debugger : https://www.sitepoint.com/using-source-maps-debug-sass-chrome/
Related
sass file can be viewed in web developer tool (style editor) of browser. But if tried to open in new tab of browser get 404 error.
e.g.
website :- https://getbootstrap.com/
scss url :- https://getbootstrap.com/docs/5.0/scss/bootstrap.scss
Can anyone tell me why browser's developer tool can show the contents of scss file but we can't open or download that scss file using url.
You can't see the .scss file because the browser doesn't understand how to display it. .scss is a different thing than .css (which a browser does understand). In order for the browser to know what SCSS is, you need some kind of compiler to output CSS. If you want to get into scss development you should check out a compiler like webpack
https://webpack.js.org/loaders/sass-loader/
or if you just want to check out how its done have a look at codepen & test out some features:)
https://blog.codepen.io/documentation/using-css-preprocessors/
I have been searching all over for information on where django-cms is storing the CSS and SCSS data for my site, which I am working on localhost. When I go to edit the CSS file directly, it has no effect, so I'm wondering what needs to be done to edit those CSS files. Obviously they have been loaded somewhere. How can they be reloaded, or in general what is the best practice for editing the CSS files?
Apparently I had to do this with both the style.scss and style.css files, which seem to have the same css classes. But even after editing both files, I had to refresh the site on my localhost a few times before I could see the changes. Frustrating, but it does work to edit the files directly in the static folder.
#Lawrence DeSouza At first you should mention which plugins and style frameworks you use.
If you are using some sort of a frontend framework like Bootstrap 4 your should compile its css from scss separately. You can do it right on the dev server in a separate directory outside your project dir and cloned from the official repository. Normally you would only need to change variables in "/bootstrap-4.x.y/scss/_variables.scss" file. On the next step you would compile your *.css files with "npm run dist" command and then copy compiled files from "/bootstrap-4.x.y/dist" directory to your "/projectname/appname/static/css" directory. The process is well-documented here. After copying changed files to your "static" folder you should run "python manage.py collectstatic" and refresh the page. If it's not working after refreshing the page in a browser (normally it should work) - restart the server. I am a bit biased towards Bootstrap, but the logic should be the same in your case.
I made changes to my website styles using the specific SASS file for the specific page that I updated. Now, in order to make this changes to my published website (until now, everything was done locally), should I upload just the modified SASS file? Or should I upload the main SASS and CSS files where everything is being compiled locally?
Answering my own question: the solution is to upload the newly modified SASS file, together with the main SASS file and the CSS file and it will work.
I'm using fourseven:scss to compile scss files. This seems to work fine if I include my .scss files under the client directory. However I'd like to leave them near my components either in /imports/ui/stylesheets/ or else right next to the components in /imports/ui/components/. It's just that nothing seems to happen when I leave them there.
The fourseven documentation says that the packages searches all directories and complies .css files from any .scss files it finds. These are then packaged up and sent down to the browser. I can see a resource "merged-stylesheets-prefixed.css" when I put my .scss in the client directory. I just can't see anything when I put it under imports.
How do I control this behaviour?
Try creating a main.scss file in the client folder and from there import all your other files, like e.g.:
#import "{}/imports/ui/components/_ComponentABC.scss";
Does it work?
in my project I have multiple sites that share common SASS files. Some of them implement their own, custom rules (in _custom.scss); others don't. So for some of the sites there is no _custom.scss file (but it is imported in common SASS anyway). To avoid putting empty _custom.scss files in each local SASS folder I created an extension in compass (like it was suggested here How to import scss file in compass only if it exists?).
But there is problem: the compiled CSS goes into css/extension_name/stylesheets folder. I want it to go into css/ folder.
I have my css_dir set to "css" but still the compiled CSS goes into css/extension_name/stylesheets. I could move the file each time but I don't think it's a good practice.
Can somebody suggest some solutions? Any help would be appreciated.