How to load package css last in meteor? - meteor

I have added a calendar package in my meteor app, but the css of this package is loading first in the final client css, which is causing the body css to override the calendar styles.
How do I make the package css to load last?

Packages are loaded before your own files in order to ensure that everything is available and ready to be utilized.
Perhaps you can simply modify the body CSS, given that you are writing it, to not overwrite that calendar.

Related

Z-index contains # in CSS

I've recently updated from angular 10 to 12.
I use SCSS.
After updating I noticed my logo is behind the content and all my z-index values have # prepended to the values and I don't know the reason why nor can't find any good information on where this change originates from or what is the cause.
Nothing changed in my config files or build pipelines except src package.json updates for packages
I also use angular material as my UI components library and have bootstrap spacing module imported additionally
I know the CSS is invalid. (after build). It's valid in design time but after build in runtime it gets hashtag prepended for whatever reason.
This was NOT the case before updates
Here's the design time
Is this some new angular feature that I'm missing here. Can't find anything relevant in docs.
Is this tied to Ivy?
Edit:
I believe this could be tied to recent sass API changes moving from #import to #use statements. ng update command should (according to docs) update and refactor scss for me but that's not the case.
Once I'm done refactoring if it fixes the issue I'll post it as answer here
Update to the latest available version of Angular. I had the same issue with 12.0.1, after ng update (12.0.5) the issue was fixed.
Check if it is inheriting the z-index from parent class. If it is then place it outside the parent class.

Overwriting css selectors in node modules

I read from time to time that it is bad practice to override css selectors in node_modules. Good practice is to override the stylesheets with more specific selectors in your own project. Can someone please explain to me why exactly this is bad practice.
To give you an example, I use the ngx-bootstrap datepicker and have had to adapt it for an application. For this I have added a custom theme to the bs-datepicker.css file. The bs-datepicker.css file was finally placed in the app folder, so everyone who pulls the project via gitlab will have the datepicker as custom when installing the dependencies via npm.
Could one say it depends, or is it fundamentally bad practice to extend the css of a node module or even overwrite selectors here?
you node module will only stay in your computer. If someone else uses your code and tries to run npm install , they will not get you manual css changes.
Also if you ever update your node_modules then also your changes will be overridden
Therefore you are suggested to make your changes in your code not in node modules.
You can use ::ng-deep in your code to make changes to some css in a library

Generate a package like rocket.chat.cordova

I made ​​some changes to rocket.chat, adding a few pages and css styles , and I have a question: how can I generate a package like rocket.chat.cordova.
Due to the css styles built in server, when I run 'meteor run ios', it can't load styles and shows me the blank screen.

How do I dynamically change less variables in Meteor?

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.

meteor: how to change include order of packages

in this post on stackoverflow, the autor recommends to include the bootstrap.js before the jquery.js. in other circumstances he wrote, that the bootstrap modal won't work properly. So i had a look at the sources of my startpage, and i saw, that meteor includes bootstrap after jquery.
And now my question: How can i change the order of the included packages in meteor?
EDIT:
The reason, why i ask, is that i have problems with bootstrap modal. For example modals disappears when i press a button inside or type something into an input...
The order the packages are added depends on their filenames.
The default order should be fine, I also use the modal with both the jquery and bootstrap packages without issue. Are you adding these script tags yourself? You don't really need them.
Why not install the packages with meteor:
meteor add bootstrap
meteor add jquery

Resources