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.
Related
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 wish there were better instructions for installing and getting started with Semantic-ui on Meteor....please see below.
Any improvements/feedback welcome.
I just decided to post these because of some difficulties I had getting semantic-ui to work with Meteor. I figured out the few things I was not getting from various answers across various forums:
Install via CLI: meteor add semantic:ui flemay:less-autoprefixer (You don't need to worry about LESS)
Create an empty custom.semantic.json file in /client/lib/semantic-ui/custom.semantic.json. (Note this is NOT the lib folder that is outside the client and server folders - make a new lib folder. Putting it in the original lib will cause your app to crash because jQuery hasn't been loaded
Start meteor - the custom.semantic.json file will populate and all the semantic-ui files will be added to your project in the same folder.
Edit the file custom.semantic.json to select only the definitions and themes you want
If you are happy with the default values you will need to remove .custom.semantic.json to generate Semantic UI - in all likelihood you will want to delete this file.
Save the file and it will generate Semantic UI
It hasn't been an issue for me yet but it appears that if you are changing theme you still need to leave the default theme setting as true. This seemed to be causing people confusion.
I wanted to use the accordion and couldn't figure how to get it working. The HTML from the docs is very straightforward but I needed this JS to get me going:
Template.yourTemplate.rendered = function() {
$('.ui.accordion').accordion();
}
If anyone knows a better way, please jump in.
Hope this helps someone avoid the minor frustrations I had earlier today.
I have the Less package loaded in my Meteor application and it is working fine. Now I need to allow the users of my app. to override my less variables. I have looked at :
less.modifyVars({
'#canvas': '#5B83AD'
});
but my app. is saying that 'less is not defined'. Can someone suggest how this can be done?
Less files can only be modified up to the point they're compiled to css files. This happens when you deploy your Meteor app.
It's not possible to change less variables at runtime. You would have to manipulate the DOM instead. Jquery is able to do this by targeting the DOM elements you want to change. You would have to tag them with a class.
An approach this way make work for you:
<div class="canvas"></div>
Then you could edit it at runtime using Jquery:
$(".canvas").css({background: '#5B83AD'});
Edit: I think the code you're refering to is the less.js client side file from https://github.com/less/less.js/. There's a bit more info under 'Client side usage' on http://lesscss.org/
This is a bit different from the Meteor less package, which is exclusively a server side compiler during development.
If you downloaded the less.js file (from https://github.com/less/less.js/archive/master.zip) and placed it in your /client/compatiblity folder you could use it in the way you wish. Keep in mind you may have to remove the Meteor less package since you want to load them raw, you will also need to reference them manually as Meteor will ignore the less once you remove the less package.
I have half a dozen CSS files inside the folder "client/CSS". In the local server it works fine but after deployment the website only seem to load the bootstrap.min.css file. Has anyone come across this? Thanks!
Meteor tries to compile all the css files it finds into one file. If you have css missing, meteor is probably failing on one of your files and giving up. When this has happened to me the issues were around unmatched brackets.
Try putting your css text into CSSLint or something like it, one at a time, and see if they have errors.
Some other discussion here that says #media and #imports lines might also be cause some issues depending on their use.
By default SASS looks at the filename and determines whether to make a css file out of it. I'm wondering if there is a way to prevent this from happening.
We're building a large website and lots of front-end developers are editing the css, but we only have one dev server. Sure some things you can see happen locally, but often you can only see the real rendered way on the server.
So, when I push my compiled css file to the server, my co-workers' css gets clobbered until s/he commits and I do an svn:update, etc, etc.
However, if we were working in different SASS file, and those css files were getting created, I would only have to push up, say, the forms.css file instead of the whole thing.
Then for Production, we'd put it back to the way SASS normally works.
The only other way I can figure to do this is to do a mass rename of files, which seem very messy.
Thanks in advance.
The entire point of partials is that they don't get compiled into files. If you want a sass file to be turned into a css file, remove the underscore.
Your real problem seems the be that you're putting compiled CSS in your version control. Don't do that. Only commit Sass, and compile it into CSS server-side with a post-receive hook or something.