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.
Related
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>
I'm trying to install Basscss CSS framework in my webpack/react app, I'm fairly new to this workflow.
When I run 'npm i basscss' I'm able to add:
require('basscss/css/basscss.css');
To my app entrypoint. However, I now need to add basscss-addons for further styling - so is the correct approach to add a require line for every single file in basscss-addons? Each addon is a separate file, and each addon's folder structure seems to be different.
It seems like there must be an easier way.
There is a method in this article that works, but it relies on cssnext and it throws warnings saying it's deprecated and that you need to upgrade to postcss instead.
So you would need to use postcss, postcss-basscss and postcss-import, I guess, but I couldn't make it work efficiently. I'd love to hear from someone who has a valid implementation with postcss...
I'm using the accordion, tooltips and transition components of UI Bootstrap.
I can create a custom build with the online tool on the UI Bootstrap website, which will create a minified and non-minified JS file containing only the components I selected, without overhead.
However, I don't want to use the online tool to compile my custom version of UI Bootstrap, instead I want to compile my own version locally, preferably using the tools I already use; Bower, Grunt and NPM.
So my question: How can I create my own version of UI Bootstrap locally?
bower install angular-ui-bootstrap, and then calling Grunt build in bower_components/angular-ui-bootstrap creates a UI Bootstrap build that includes all modules, there's probably a way to do the same with only a subset of the modules, but I could not figure this out.
It can be done by using the following command
grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN
For example if you require the build to contain only tabs and buttons module , then the grunt command will be like
grunt build:tabs:buttons
The generated files will be present in dist folder
For the list of module names , check all folder names in src folder
The documentation for this is sparse , but if you check the Gruntfile.js , where they register the build task , they mention about how to build modules selectively
It is not as easy as I expected (and as it should be).
Take a look at the Gruntfile.js of the project. You will see that they do quite a lot. Converting HTML and CSS to JS, concating all the scripts in such way they are loadable by others. Moreover the file is quite difficult for orientation; it even includes custom tasks.
To mimic its behaviour I suggest this: Download it via Bower as you normally do. Copy its node dependecies to your package.json dependencies. Then copy the Gruntfile.js, change he routes, and try deleting some parts of the code until you reach a point when you cannot remove more lines without breaking it. It is not a nice way, it should be however successful.
If one had a lot of time, the build script is a good candidate for a deep refactoring. Moving custom tasks to standalone files (or projects), documenting the flow, and maybe implementing standard tasks for some steps (e.g. CSS minification).
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!
I need to define a model for newly created projects in Aptana.
Basically, I want, anytime, when I create a new project, it adds some defined directories/files (not existing files, but new ones) to this project.
I'm not even sure it's possible.
Aptana doesn't appear to support that.
Maybe you can just create a small external sript to do it for you? Not the ideal solution, but better then none.
This might be a longshot, but it is worth mentioning. Since Aptana is based on Eclipse, you might be able to see how Eclipse would handle custom project templates. It appears that the easiest way to go about this is to actually create an Eclipse plugin that has a Template Wizard. IBM has a nice guide on how to use PDE to create a Custom Template. I am not sure if you will be able use PDE from within Aptana (you might be able to), otherwise, you might need to download a stock version of Eclipse, create the Plugin, then install it in Aptana.
Aptana is based on eclipse, so you could use a combination of Maven Archetypes and the Maven eclipse plugin to achieve this really easily.
Download and install maven
Create a basic maven project using the quickstart archetype, Archetypes are project templates used to rubber stamp new project structures. The quickstart is a very basic project template
mvn archetype:generate
generate the eclipse project files using the eclipse plugin. This will create the standard
mvn eclipse:eclipse
tweak the pom until and re-run step 3 until you're satisfied with the layout etc. You'll no doubt have to add configuration the eclipse plugin to add the correct build spec and project nature. If you open an existing .project file it will contain the values you need. you can see here how to add them.
once the project is set up to your liking you can create your own archetype out of it and use this to rubber stamp new projects in the future.
mvn:archetype:create-from-project
now you can run the generate again and can select your archetype from the list. If its not there, you may need to run this first to update the list of archetypes
mvn archetype:crawl
Open Source your archetype for others to use ;)
It's very simple in Studio 3. Try the following: http://wiki.appcelerator.org/display/tis/Creating+a+new+template#Creatinganewtemplate-Creatinganewprojecttemplate
Basically you create a .zip file of the project content, and then write a few lines of Ruby code to reference it.
Aptana uses (as I'm sure you know) its own 'new rails' project that gives you a variety of options.
I don't think it's beyond Will (the RadRails maintainer) to add a simple text field to that Wizard that would allow you to enter a command-line option parameter. He's always been very responsive with my previous bug and feature requests.
If you want to give that a try, and that works, then I would HIGHLY and STRONGLY recommend that you look into one of the new Rails features 'templates' in which you could make a generic template, then call it through the new input box. We use templates at my current job and they save us about 4 hours of work on each project. They are very easy to use...def...definitely.
If you can't wait for the input box, then you could always write the template then call it from within the command line (see
http://m.onkey.org/2008/12/4/rails-templates
for info about templates)
Unless RadRails three is light-years ahead of the latest release, though, you'll be missing out on a lot of very handy advantages of using a more community-supported solution such as VIM or TextMate. (I switched to VIM from RadRails about 4 months ago and have never looked back).
Eclipse has a Plugin Development Environment. If I'm not mistaken, you can also create project templates with it. Please try: http://www.ibm.com/developerworks/library/os-eclipse-pde/