I am new to coding and stack overflow as well. All I know is if you ever run into any coding problem go to StackOverflow and there somebody will definitely help you. So I recently got a problem with sass compiling. I am using Ritwik Dey's " live sass compiler ' extension to compile my partial .scss files but I am stuck here -
Edit 1 : Just got to know that I can't upload images yet! Please watch this >
Issue gif
So here as you can see my main.css file had around 244 lines of code and I was working on this file. But as soon as I compiled my _grid.scss file, it gave me some errors. Now I don't know about these errors. But it is not compiling properly and increasing my main.css file every time. I don't know where these lines of code are coming from. But I do think that it is compiling every sass file which I have in other folders.
I am working on the file from " starter " folder. But I think it is compiling sass files from " final-S05 " and " final-after-S06 " as well ?
Is this the issue? If so, then how can I solve it?
Any help would be highly appreciable!
First of all, thanks a lot for your responses #Kevin M. Mansour #somethinghere. I just got to know the rookie mistakes I have been making in my code.
So the first mistake was the save location path was ill-defined by me in the compiler extension. "savePath": "/starter/compiled css" this is the correct one. I don't remember what I was putting here before. Actually, I was confused regarding / this slash. So now I know that it took us to the root folder and from there on we can specify the location where we want to save our files.
And the other mistake was a typo error in importing the partial button.scss file. I was importing using this syntax #import "components/button.scss"; which was absolutely wrong. So I corrected it #import "components/button"; in my main.scss file and it worked.
So ya these were the mistakes I was making ! I hope new devs don't make these same mistakes just like I did.
Ps. This is my first answer on stack overflow. Feel free to guide me through your valuable suggestions and feedback.
Related
I have a question about SCSS. I am new at this, so if I'm not providing enough information please let me know so that I can update my question.
I am currently working on a Wordpress installation that has an SCSS directory, with all of the various .scss files.
I tried editing the files directly, and came across a lot of issues. I did some research, and it looks like the scss needs to be compiled into css so that the site can read it. Issue is, no matter how I try, it just simply doesn't work. The site styles break, and the updated code won't work. I know I can change the css directly, but I understand that if the scss is recompiled it will remove my direct css changes.
Any help would be so appreciated.
If you don't have any way to compile the SASS to CSS then an easy way to translate your code is by using sassmeister.
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?
I've got a very weird issue with my Ember application. I have a style.css file that is (unfortunately) 4030 lines long due to circumstances I cannot change at the moment. It is included in my app/index.html file like so
<link rel="stylesheet" href="assets/style.css">
When I run ember build --prod on my ember app, I get the error: "Ember is not defined". Now here's the strange part: if I copy about 100 lines from the end of the style.css and then paste it to the beginning of the style.css file, then building to production has no problem, and the completed build runs perfectly. Of course, this practice of shuffling around the style.css cannot be continued for long, and therefore I need to find a solution - or at least the cause of this.
I'm asking if anyone has experienced this problem, and if so, what was done to fix it.
So. After researching and trial and error, I've found that the reason this was a problem was because I named my main css file 'style.css', which is a very common name for a .css file. One of my vendor packages (still don't know which one) had a .css file also called style.css, and during compilation, the vendor .css and my app's .css clashed with each other.
Changed the name to 'myCompany_style.css' and everything works fine. Also as per #kumkanillam's suggestion, moved all css compilation to app.css
Will edit answer to include issue link if I can re-find it.
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!
I am collaborating with Senior Developers and quite embarrassed to ask why the code in all the .css files is on one line?! At first I thought it was minified but when I went to unminify it it said Unrecognized format. How do I work with these files? As far as I can see it's ONLY the .css files.
It can be the case they are using a CSS compiler (like SASS or LESS),
in that case the files won't have .css extension but .SASS, .SCSS,
.LESS which will be compiled into a single CSS. - Teknotica
Tecknotica's speculation was correct. So to be more specific this is how you would work with these files given a similar situation. You don't actually write CSS directly into the CSS file but instead add your CSS to a SCSS file that then gets compiled into the CSS file using a tool such as Grunt. The CSS is all on one line in the CSS file (the one you don't directly write to) apparently because it reduces to the number of requests to get the bits. Thanks for everyone's help & advice.
Ew, that's annoying. Usually when I come across that, I just do a search and replace for " ; " and add a break beneath it to help organize everything. Hope that helps!