I am new to css and js. I am really struggling to locate where each individual css file is called from. I have created a combined.css file where i have copied and pasted the code of each css file that loads when my site is loaded, there are 12 files in total. I have added this combined.css into my head section so it loads first. Now the problem is all the other css files are still being loaded. I spending hours looking for are tring different solution, nothing has worked. How do i locate where each individual css file is called from so i can comment this out. If you can give me a step by step guide i would really appreciate that.
You can use Chrome (or something similar like Firebug in Firefox).
just hit F12 on your page to get the Developers Tool > Resources > Frames > [choose your folder] > Stylesheets and then you'll get all the CSS that are loaded.
just hover one of them to see its location
Related
I am having trouble finding information on this "normalize.less" thing I'm seeing in the Chrome 76 developer console. At the same spot in Firefox 69's console, it instead shows bootstrap.min.css so I'm guessing it's part of bootstrap, at least in my case. What is it though?
When I hover over it in Chrome, it pops up a filepath pointing to localhost/css/less/normalize.less but I don't have any folders under css, let alone one named less.
I've tried Googling "localhost css less" and "normalize.less" but am mostly finding various GitHub projects I'm not using and a few questions on here asking why less.css isn't working. I have no reason to think it's broken or getting in my way, I just have no idea what it is.
Also, to be clear, any mention here of normalize.css or less.css are from the search results I've seen. I'm focusing on normalize.less. (...they're not somehow the same thing or anything, are they?)
For the purpose of finding/seeing this reference to normalize.less:
What is it, and why did Chrome point me to an apparently non-existent file and folder? (bug?) Is there any relation between normalize.less, normalize.css, and less.css? Heck, what are .less files in general?
This is because the location of the bootstrap CSS file also has a .map file.
This file is used to indicate to the developer which file and which line is the attribute he wants to change, since the bootstrap.min.css file is nothing more than a large compilation of dozens of files.
I'm using the Chrome devtools persistence feature with browser-sync and sass.
I set a Workspace pointing to my scss folder and I can edit scss files from Chrome and have all css files created correctly, applied to browser real-time and saved in hard drive.
However when I select an element on the Elements > Styles tab and make some changes, the changed file is the http://localhost:3000... one so changes are not kept. Then I still have to find the local file in the Sources tab to copy these changes.
I'm not sure if this is the best we can get but if we could either open the local file directly from the Elements > Style tab instead of the http://localhost:3000... file or somehow automatically copy any changes in the http://localhost:3000... file to local file the workflow would be even easier and faster.
Does any one knows how to accomplish that, even using some app/extension?
UPDATE:
From Rohit answer I found that if I turn off css source maps in devtools settings then it is correctly synced, showing the green circle on the Elements > Style and keep my changes, although it still pointing to http://localhost:3000...style.css file.
However then it only changes this file, not the specific partials/*.scss file and if I run sass compiler it overrides the css with the old code.
With the css source maps on Chrome finds my partial scss correctly but doesn't show the green circle so it's not synced and doesn't keep changes.
The problem seems to be with syncing scss files instead of css.
I was trying with a Workspace pointing to my root scss folder, also tried pointing it to the direct parent of the file beeing edited and still not syncing corretly.
This is a shot in the dark but,I beleive if you add the parent folder of the files you are working on from Devtools > Sources Tab > Filesystem tab > Add folder to workspace.
Like so :
Then navigate to your folder, and add reload the page. After reloading if you see green
like so:
It means it is synced and will update without you going to the sources tab.
Adding the root of my project to the Workspace synced scss files correctly. Now when I click an element on the Element > Styles tab, Quick source opens the right file at the right scss rule but doesn't follow my changes in the Element > Styles tab (as it does using pure css) and I still need to copy changes to Quick source or edit there directly, save and wait sass compilation to apply changes on screen.
The workflow is much easier now but I'm not choosing this as the correct anwser because is not "as live as css" yet and maybe someone knows how to do this final step.
PS: browser-sync is not needed in this setup, just something to compile sass and Chrome apply changes automatically.
Can PhpStorm hide generated CSS files under the LESS file?
Here is a screenshot of a WordPress theme:
I've found myself opening the .css file instead of the .less one on numerous occasions. Is there some way to group these files together so I never see the .css file? A bit like a closed folder, have to click the arrow to view generated file?
(I remember seeing a similar feature somewhere, not sure if it was in PhpStorm or another editor)
I did have LESS files in their own folder, but I still found myself opening the .css file from time to time by accident. It would be good to hide them completely.
Thanks!
Never mind, it seems to be (kinda?) working:
style.less nests style.css correctly, not sure why the others are not showing.
It is called File Nesting and it’s available from the gear icon in the Project browser.
I have an app which needs to work in several languages, and several different color schemes and I would rather not load all the CSS every time since a large amount of it is not necessary or relavant (rtl css for example) but meteor automaticaly loads all CSS files he can find.
is there a way to selectively load CSS files?
Thanks.
If you place a CSS file within the reach of Meteor compiler, it's merged into the main app and in the current release there's nothing you can do about this.
You can however put the file in /public directory. Meteor won't touch it there, and you will be able to load it at will by adding <link/> tag to your page head.
Please have a look at https://stackoverflow.com/a/26694517/1523072 which seems a quite elegant way to do this and also explains why you shouldn't do it.
One of my apps currently loads 2.6MB compressed Javascript and 300KB compressed CSS, which seems like a lot. However, after the first visit all the resources are cached by my browser, which means the only thing that is transferred between browser and server after that is pure data.
i'm stuck for hours now to figure out how the heck i can get my Stylesheets into my Webpart. Now i've found several resources claiming on how it works
http://www.c-sharpcorner.com/uploadfile/manni_prince/embedding-css-file-in-custom-webpart-in-sharepoint/
Using custom css within a Sharepoint webpart as a Embedded Resource is not working, why?
some others, too, basically doing the same
Now the first one works. But it shouldn't really be needed to manually place a single CSS File in a specific folder on each System (Dev, Test, Live). There has to be a way to embedd the Webpart into the deployment file for the project.
Searching for this i came up with the second link i've posted. This pretty much LOOKS like something i wanna do, but i simply can not get it to work.
My Structure is the following:
./SOLUTION
> Properties
> References
> ...
> Webpart1
> ...
> Webpart2
> Webpart2.css
> ...
> Styles (A Folder of VS Style 'Module')
> wp2.css
Would someone be so kind to tell me how i can include the wp2.css into the sharepoint page only if the webpart is visible on the page. Without the need of me manually needing to place the css file as pointed out in link 1.
Thanks a lot in advance!
Add the Layouts mapped folder to the solution (How to: Add and Remove Mapped Folders).
Create appropriate folder structure inside (e.g. /1033/styles) and copy the CSS file there.
Build the WSP package - the CSS file will be placed inside and copied to the [14 hive]\TEMPLATE\LAYOUTS\1033\styles folder once the package is deployed.