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...
Related
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.
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>
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!
This is a noob question.
I would like to use grunt.js as a build tool for my web project. Can use grunt.js to validate my HTML/CSS files? Do you have an example of such a grunt.js file?
There is another plugin that seems to be updated more often and does not require java. grunt-html-validation. It has a number of options and has been working great for me. You can install and use it like this:
npm install grunt-html-validation --save-dev
Then put something like this in the initconfig of your Gruntfile.js
and this in appropriate places in your Gruntfile.js
grunt.loadNpmTasks('grunt-html-validation');
grunt.registerTask("default", ["validation"]);
There is also a number of useful options including the ability to relax errors based on a regular expression (could be useful for AngularJS for example) and the ability to save a report.
You can use the grunt plugin grunt-html. Beware, you will need Java on your computer to use it. It works well for me.
As of now there seem to be two popular HTML validation plugins:
grunt-html-validation
grunt-html
grunt-html-validation uses the W3C Markup Validation Service and grunt-html uses a local copy of the java-based The Nu HTML Checker.
They both work well and have very similar options so it comes down to whether you want to wait for an external service call or wait for a local java app.
How can I create a new project that only uses the Symfony2 Console component?
I haven't been able to figure out the most basic setup I would need to do, to just use the Console component (and any other must-have dependencies).
Where should I place the component files, and what do I need to include in my own code file?
The online tutorials are seriously lacking in detailed step by step explanations on how to use the various components as stand-alone components, and not as a part of the Symfony standard distribution.
Solution Found:
I've created a detailed step-by-step guide on how to use the Symfony 2 Console Component in your project. I hope this helps fill the documentation void.
Well one of the easiest ways would be to use Composer. Youd set up a composer.json in the root of your project and then just invoke composer.phar install from the command line.
Example composer.json for console:
{
"require": {
"symfony/console": "2.*"
}
}
After that you can just include the composer autoloading and you should be good to go.
// in your bootstrap or what have you
require 'path/to/project/root/vendor/.composer/autoload.php';
That jsut gets everything set up and ready to use though... you still need to figure out how to integrate it in a way that makes sense within your project. You might actually take a look at Composer itself or Doctrine 2 for some idea of how to do that since they both use it as their console interface.
Also just some validation... you arent the only one annoyed by the lack of documentation on using the standalone components outside the full stack. :-)