The newest Rails release 5.1.0.rc1 includes bin/yarn by default. This allows you to install npm modules out of the box. Currently importing javascript files from application.js seems to work fine, but I haven't been able to import css files from the installed modules.
The approach I've tried is using the tilde opperator to let SASS know that it's suppose to be a module:
#import "~owlcarousel-pre/owl-carousel/owl.carousel";
Any ideas on how to get this working?
I was able to get it working by removing the tilde operator.
#import "owlcarousel-pre/owl-carousel/owl.carousel";
Apparently I got mislead by the linting options on my editor that insisted on putting it, but the asset pipeline includes the modules for you so there's no need to use it.
Related
I am following this document and trying to grab the tag input functionality in my rails application using webpack.
I added the following line
import 'tagsinput.js'
to import this library in my application.js file but performing a yarn install didn't seem to recognize the library.
I am guessing I am importing it the wrong way or either not initializing it in webpack config. Looking for help on the right way to import and use this library using yarn and webpack.
I was able to get bootstrap4-tagsinput working in my Rails app for webpacker by:
A) Adding bootstrap4-tagsinput module via Yarn
yarn add bootstrap4-tagsinput
B) Importing the bootstrap4-tagsinput into my application.js
import 'bootstrap4-tagsinput/tagsinput.js'
C) Importing stylesheet into my main scss file
#import "~bootstrap4-tagsinput/tagsinput";
Here's what it looks like in my app:
Harumpf. This only shows up with tags if I refresh the form. It seems to run too early.
In order to access to the benefits of the pro package, adding font-awesome 5 from the gem is not possible.
Tried diferent ways to add the files provided to the project. Following Official guide
Package content:
I saw in other stackoverflow posts, that the correct way to add it to the app is in
vendor/assets/
But after that, puting /on-server/'s css, js, and font or the /web-fonts-with-css/ files still didn't work.
Tried adding custom stylesheet link, require and import in scss. No way to achieve it.
Hope I've been clear.
Using the 'Web Fonts with CSS' approach has a wrinkle because the font url is hardcoded into the CSS file, but it can be done.
CSS:
Copy the fontawesome-all.css to the 'vendor/assets/stylesheets' folder.
Update your app/assets/stylesheets/application.css file with
*= require fontawesome-all
Fonts:
Then copy the webfonts folder to the public dir so all the fonts are in the public/webfonts folder.
Restart your server and you should now be able to see your FA5 fonts.
SVG with JS
If you want to make it even easier (only 1 file to track) then you can do the 'SVG with JS' approach.
JS:
Copy the fontawesome-all.js to the 'vendor/assets/javascripts' folder.
Update your app/assets/stylesheets/application.js file with
//= require fontawesome-all
Restart your server and you are good to go.
If you are using rails which supports Node Modules.
Add Configuration
npm config set "#fortawesome:registry" https://npm.fontawesome.com/ && \
npm config set "//npm.fontawesome.com/:_authToken" YOUR_AUTH_TOKEN
OR
Save configuration in file .npmrc in app root folder as below
#fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=YOUR_AUTH_TOKEN
Run NPM or YARN to install the package
npm install --save #fortawesome/fontawesome-pro
OR
yarn add #fortawesome/fontawesome-pro
Add the packages in app/assets/application.js file
//= require #fortawesome/fontawesome-pro/js/all.min.js
Include Node Modules folder in assets path by adding below line in config/application.rb
config.assets.paths << Rails.root.join('node_modules')
Start the server again and you are good to go with font-awesome PRO.
For more details you can visit the below link:
https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers
There is also a way to use raw svg without any js and thus avoiding rendering issues and nasty hacks that lead to annoying flickering side effects
It comes in the form of a view helper called faw_icon https://github.com/alexwebgr/faw_icon and it provides three ways to load svg into your application
using the icons.json from the metadata
using the raw single svg files
using the svg sprites
by design it doesn't bundle any icons catering for a small download size and giving the developers the ability to update the icon sets as new ones become available, use custom ones or the PRO collection
I have installed into a new project in codekit the following components:
jquery
animate.css
normalize
Modernizer
I understand that keeping these components in the bower directory is recommended so these files are easily updated. However, do we link to these in our html files directly? My sass files get compiled and outputted to assets/css but there aren't any sass files in the bower components and creating them in the original folder would, I assume, get overridden if I was to upgrade. Seems very odd to me to upload the entire bower_components file to the production server with all the dependent files. I have been building site for a long time without all this node, git, grunt, bower, et al stuff. I see the value in it, but I'm having a tough time getting up to speed. Any help sure would be appreciated.
In most cases, you would want to include the third-party components (e.g. css, javascript, ... files) within your own master css or javascript file and then minimize that file for production. For example, my folder structure looks like:
bower_components/
...
release/
css/
styles.min.css
img/
...
js/
scripts.min.js
src/
images/
...
scripts/
scripts.js
styles/
styles.less
templates/
...
And then, within styles.less, I might have:
#import (less) "../../bower_components/normalize-css/normalize.css";
Or within scripts.js I could have:
//#codekit-prepend "../../bower_components/jquery/dist/jquery.js"
I have CodeKit set to generate the minified versions in release/ from those files. The only files that go to production are all of the files in the release/ folder.
I'm using the AngularJS Yeoman generator (https://github.com/yeoman/generator-angular) and Express for the server. When running grunt server, it starts up my app fine and compiles .scss files into the .tmp folder in the root directory, but my pages don't automatically load that css. I have set up a link to the style/style.css stylesheet in my layout jade file.
I've also tried grunt compass, which works fine, but again, does not make it so my views actually load the css file in .tmp. I have the default compass setup in grunt.
This was an issue with live-reloading that has been addressed in newer releases. Update your generators through yo or by running npm update -g generator-angular. If you want to upgrade an existing project, you can run yo angular in the same directory and choose the diff option to see the changes you have to make.
As for May 22, 2015 ... the yeoman generator-angular does not work correctly unless you select Yes when asked if you'd like to include the Twitter Bootstrap. Perhaps subsequent releases will fix this.
On a good note, there are much less problems with the generator-angular than with generator-angular-ui-router (which is a disaster)
I would like to use the SlickGrid plugin in my Rails 3 application.
I contains several JS and CSS files that I should include in my HTML page.
It is possible to put all the needed JS files in the public/javascripts directory and all the CSS files in the public/stylesheets directory. However, I don't like this solution because it breaks the plugin package files structure.
I would like to put all the plugin files in one place (I thought about vendor/plugins, is it a better place?), and include the needed files from there. Is that possible ?
What is the proper way to include the JS and CSS files when integrating a plugin ?
I think Jammit can help you accomplish what you're trying to do. Besides packaging, embedding, gzipping your assets, it also allows you to store javascript and stylesheets anywhere in your app. Images (if not embedded) could be a problem though.
Answer by #rubiii is also good, but since sprockets gem from version 2.10.0 supports bower, now it is extremely easy to integrate any js/css libraries. Also version management and updating as easy as typing bower install. Bower can be installed through nodejs npm install -g bower, include .bowerrc file in root of application with content inside:
{
"directory": "vendor/assets/components"
}
Then specify libraries in bower.json and run bower install
{
"name": "appName",
"version": "0.0.0",
"dependencies": {
"bootstrap": "~3.0.0",
}
}
After components installed, require files in application.js/application.css as usually. e.g.
*= require bootstrap