Angular 2 instant CSS reload - css

I'm looking very hard to find a solution to this. I'm trying to serve my application so it reloads only changed css files without recompilling the whole app, because now it's very frustrating when you change one thing in CSS and have to wait for the app to recompile. I tried to use lite server but with no luck. Quick Start app works just fine, but I cant configure my CLI projects the same way. Any help?
Thanks!

Learn a little about grunt / gulp, I think that can help you here.
You need to call livereload.changed(files) when change happens. To do that see gulp-watch doc. (stackoverflow)
watch('**/*.css', function (files) {
livereload.changed(files)
});
https://css-tricks.com/gulp-for-beginners/

Related

Switch CSS to SCSS Jhipster style

I decide to use scss instead of css in my project, but I'm having real hard time with switch manually the project, i want to know if there's a way to switch to scss in a clean way by jhipster or maybe i have to regenerate the app from the start and select scss in the configuration? this way should work fine but it will take really long time to get the app back in the actual state. I'm looking for a better solution. Any ideas?
You could create a git branch, edit .yo-rc.json, enable sass, re-generate your app using jhipster --with-entities then merge into your master branch using the git merge strategy that suits you to keep your custom code.
Perhaps you could use this npm package. You can use it as an executable or as a library. The installation and usage are described in detail in the page linked above.

Meteor hot reloader does not detect .graphql file changes

I've been facing a really frustrating problem regarding .graphql files while developing in Meteor. Whenever I change my graphql files, Meteor does not notice the changes and I should change something in the source files to force Meteor to reload.
However, sometimes it does not even apply the changes after the hot reloading.
I'm wondering if the be any solution to get around this issue.
Meteor knows to recompile based on files changing that have an extension that Meteor or a Meteor build plugin supports.
https://guide.meteor.com/build-tool.html#build-plugins
This one supports .graphql files:
https://github.com/Swydo/meteor-graphql

'npm run dev' and 'npm run build prod' not producing the same output

I'm developing a progressive web app using Vue.js.
While I'm developing I use the command npm run dev to start the local server which serves the files on http://localhost:8080/. When I want to build for production I use npm run build prod which generates the output files in project\dist. I then take those files and copy them onto an ISS which is configured to work with single-page applications. All good so far.
I noticed some differences in the way the app looks (css) between the dev and prod build. First I thought this might be because of a client side cache, but after several tries to clean the cache and no-cache loading I'm sure that caching is not the issue here. The output really is different.
To be honest, I'm not sure if there is anything else different besides a few minor css parts. I was thinking what might be the issue, one of the things I noticed that could be the cause is that I use single file components in vue with scoped css (*.scoped.vue.css file names). I guess there could be an issue combining the different files into a single one?
It might be noted that I'm quite a newby when it comes to npm, webpack and all the other involved technologies. If you want to take a look at the configuration, you can find my current working branch build configurations here.
Any idea what the issue might be?
I encountered the same problem when using single file components. The issue indeed seems to be that when you run npm run build it will generate one single css file without the guarantee that the styling will be applied in the same order, causing some property values to be ignored. I 'fixed' it by adding !important to the properties that weren't matching up in the final build. There's probably a better way to handle this, but I must admit I too am quite a newby.
The order of how styles are applied while npm run build matters, and is to my knowledge out of (y)our control. To get rid of conflicts, when using Vue.js, you may want to scope your styles.
In every *.vue file within your project, replace
<style>
...
</style>
With
<style scoped>
...
</style>

Implement HTML5 / CSS calendar

Hey I just found calendars for my app I want to develop.
Because I'm totally new to this I need some help on how I can implement that calendar into my application.
https://designsmaz.com/free-html5-css3-calendar/
Right now I just copied the css files and so on in the project folder but right now nothing shows up. So I think I got to implement something in my app or place that stuff in an other directory.
For developing I'm using Intel XDK.
Thanks for your help!
Ok, I just added the index file from the online project to my project directory and it works fine. So I'm able to go on testing. ;)

How to run ember-cli with Symfony?

Does anyone tried to run ember, especially with ember-cli inside Symfony application? I am actually trying to use prerender.io to achieve this. Doing it simply without ember-cli works, but with it, things getting complicated. Main problem is in
ember server
how to overcome this, so assets are build (or just easily watched).
ember build --watch
is actually really slow, around 4sec to build on every change is a lot.
Thanks!
Have you succeeded? I'm on the same line here. But I did used another approach, I'm starting the a server instead, in a bash file like this:
ember s --output-path=$SF_DIR/web/app
Then on a sf twig view, included the index.html. It works fast, but looses the livereload feature since it's not made to work outside root. Can you tell me how you did resolve your sf2+ember-cli architecture?
Hope it helps, thanks!

Resources