Enviroment
I have an extjs 6 application which is already compiled and the css files like they should be. This application wasn't compiled for a while and now it's generating a different (wrong) css file. Since someone else changed the app, I have no clue what has changed since the last compilation. I compile with sencha app build development and the following CSS files change:
build\development\MyApp\classic\resources\MyApp-all_1.css
build\development\MyApp\classic\resources\MyApp-all_2.css
There are a few more files in the folder which do not change.
Versions:
Sencha Cmd 6.1.3.42
SDK Version (if neccessary) 6.0.2.407
Problem
I want to generate the same css like before. It seems there are just a few files which are not included within the compilation process, like:
ext/classic/theme-base/sass/etc/mixins/frame.scss
ext/classic/theme-base/sass/etc/mixins/slicer.scss
ext/classic/theme-neutral/sass/src/tab/Tab.scss
Question
What do I have to do, to get the old css? Is there some file with includes? Like classic\sass\src\view\main\Main.scss or something? I guess those includes are somewhere (since it already worked at least once) and maybe commented out or something.
What I've already tried
I tried to compile with different themes refered by the app.json attribute was builds->theme. I also tried a lot of playing around stuff, which I can't describe here in detail.
Any advice would be greatly appreciated!
Thanks in advance!
If you have any questions leave a comment and I'll try to add it to my text!
Related
Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.
I am working on updating all of the CSS files and want to make sure the old files arent referenced anywhere in the solution. I guess I could always do a Ctrl+Find of the following:
<link rel="stylesheet" href="/Content/front/css/style.css" />
but I was hoping to be able to have a quick way to see how many times and where the file is being referenced. Similar to how you can do code inspection for various classes you call throughout the project.
My Second goal is to remove all CSS/Js files that aren't being used from the solution altogether!
Any help would be awesome. Working in VS 2013 Ultimate.
You could try running the code with the old file deleted and look for all of the errors that the code throws. (All of the can't find file errors)
Note: For all of you programmers that see this and feel like crying. I know that this is not the cleanest way of doing this but it should work and is easy to do. Let me know if there is a better way of doing this.
Use the Developer Tools in Chrome to find out the local resources your page is using. Press Ctrl + Shift + I on Chrome and go to the Sources tab, then compare them to your project files and delete what you do not need.
Run this from a cmd file in your source file directory
find -i-n *.* "css">>Results.txt
I am getting really confused about configuring Sass config options. Basically I want to disable the line comments in the compiled css file. So I went in and created a sass.rb in the Initializers folder with the following line:
Rails.application.config.sass.line_comments = true
I then restart my apache server and check in Safari web developer, my css file still contains the comments like /* line## /path/to/css/file */ above every css statement. I then test it in Firefox and open Firebug, and I don't see those line comments there, which suggest inconsistent browser behavior.
So I go back to my initializer sass.rb file and turn on line_comments, restart the web server and try again, this time I get the exact same result as before, nothing's changed, that basically tells me either that's specific to the browsers, there's a problem with the setting scope/syntax, or there's a caching issue (I'm working in development, so there shouldn't be any caching, right?). I'd really appreciate if someone can provide some insight on this. Thanks.
EDIT: The proposed solution to make a change to the sass file(s) didn't solve anything so I doubt it is the same problem.
Note: I am using sass with rails and I am getting separate css files for each of my sass files, which doesn't seem very right...
The problem was a combination of needing to set config.assets.debug to false for development, setting config.assets.compress to true, and probably a better understanding of sass compilation.
I'm trying to troubleshoot a LESS issue with my Meteor code..
I have bootstrap3-less package installed but I don't know where Meteor is getting it's LESS files from. This whole time I thought it was coming from a .less file in my client/ folder but I removed that entirely but for some reason my Meteor CSS file does not change once I remove that. But yet, when I inspect the compiled CSS file, it stayed exactly the same.
However, when I make changes to my .css file Meteor picks that up right away..
Anyone have this experience? thanks
The bootstrap3-less package contains the less code inside itself. If you want to use your own less code instead of the code inside bootstrap3-less, you should remove bootstrap3-less.
Here you can see the code that the bootstrap3-less package adds to your app: https://github.com/simison/bootstrap3-less
They suggest that you can customize bootstrap by adding the less file to your client folder, but even if you don't have that file the app will load all of the less content from the package.
IE 8 and lower has a limit to the number of selectors allowed in a single style sheet and once the limit is reached the style sheet needs to be split. Apparently someone addressed this in Compass by creating a way to have Compass do this automatically, and created a gist about it. I however don't have the skills to know what the next step is and there is little in the way of documentation on what to do with this code. Can anyone help with how to integrate this into my Compass install?
Ref: https://gist.github.com/1131536
Thanks much!
Create css_spliter.rb file (as described in your Ref) beside your config.rb file, at the root of your sass project.
Add the following line at the beginning of your config.rb file
require 'css_splitter'
And add the 3 following lines at the end (of config.rb)
on_stylesheet_saved do |path|
CssSplitter.split(path) unless path[/\d+$/]
end
Then run compass compile as you usually do. You won't see the files *myFile_2.css*, *myFile_3.css*, ... appear in the logs but they are well created in your css folder. Also the command compass clean won't remove them, you'll have to dele them manually from your css/ folder.
For what it's worth, there is a Node.js app called Bless that will provide you this functionality. It can run server side or on your local machine.
If you happen to be using CodeKit to compile your Sass/Compass files, it's baked in, you just have to enable it in project settings.
I think the css_splitter solution forgets to remove the code from the first file. Now I have 2 files, the first one is all of my css and the second generated file has the 2nd half of the original file. So I have 150% the amount of CSS as I used to... I did fix my problem in IE though :)