I wanted to use in my rails project bootstrap framework. I used this github repository/instruction to do it: https://github.com/twbs/bootstrap-rubygem.
In the instruction it is underlined that I need to change my application.css extension to css.scss and use only import statements (delete all: //= require). How can I include in my application other css files? With require I could simply type //= require tree . but in this case I have no idea what to do.
You can still use require_tree . but the css files included this way is not compiled by sass and does not have access to sass variables and mixins defined in other files.
The recommended solution is to create one single file (say main.scss) and import all files that require access to site-wide sass resources (e.g. bootstrap variables and mixins). Then you import this one file in application.scss. And you can leave your require tree . there to pick up the rest of the files.
Related
I've added the webpacker gem, bundled, installed and edited all my javascript_include tags to javascript_pack.
What happens with the existing javascript? I have lots of it under app/assets/javascripts and vendor/assets/javascripts. It doesn't seem to pick it up automatically.
Some of this javascript is required into application.js.erb and some other files load directly into various parts of the application, eg:
app/assets/javascripts/application.js.erb # linked to from application layout
//= require global
//= require bootstrap
//= require moment
//= require websockets
//= require init
Then I also have:
app/assets/javascripts/users.js
//= require table
//= require form
//= require sync
//= require controllers/users/index
Some of these files are small Vue apps, I've placed their templates under Rails views. Now after this webpacker business I have app/assets/javascripts (which contains all my actual code but is ignored), then app/javascript which I don't know what it is, and app/javascripts where I'm supposed to put my Vue apps. Or the other way around. Or something.
How do I get all this to work with webpacker? None of the tutorials I've found cover migrating existing code to webpacker and to be honest I don't understand much from all those javascript snippets they just dump there but don't explain what it actually does and how.
By default, adding webpack doesn't change anything. For example, if you leave javascript_include_tag 'application' in your layout, it will continue to work the same as it did before adding webpack.
The files in the javascript/packs folder are entry points for javascript. If you are doing a single page app, you will likely have a single pack like application.js which boots up your entire application. If you are doing a conventional app, you will likely have a main application.js file that loads all global scripts, plus other page or component level scripts like settings.js or calendar.js. These scripts are loaded with javascript_pack_tag 'application'.
If you move your files out of the assets folder into the javascript folder you can then add them to your pack file like so:
import 'global';
window.$ = window.jQuery = require('jquery');
import 'bootstrap';
import 'moment';
import 'websockets';
window.addEventListener('DOMContentLoaded', (event) => {
console.log('do init stuff here');
// use bootstrap here
});
Rails 4.2.4
Ruby 2.1.2
I am trying to use twitter-bootstrap-rails.
I would like to use it by the same way I am using jquery-rails
assets/applications.js
//= require jquery
In this case I don't need to copy any jquery.js or jquery.css files to my project because Rails fetches it for me form gem.
The different situation is with twitter-bootstrap-rails.
In the guide
The Twitter Bootstrap Rails gem can provide the Bootstrap stylesheets
in two ways.
The plain CSS way is how Bootstrap is provided on the official
website.
The Less way provides more customization options, like changing theme
colors, and provides useful Less mixins for your code, but requires
the Less gem and the Ruby Racer Javascript runtime (not available on
Microsoft Windows).
Seems the first way is more suitable for me. But in this case I should use the generator rails generate bootstrap:install static before to use any twitter-bootstrap .js or .css files. The generator fetches the files into assets folder of my project.
So I am looking for a way how to use twitter-bootstrap-rails .js and .css files in my project without copying them into my project folder. I just would like to add twitter-bootstrap-rails files just putting for instance line //= require bootstrap into application.js.
Thanks a lot.
Instead of using twitter-bootstap-rails, use bootstrap-sass.
In your application.js, add the following:
//= require bootstrap-sprockets
change application.css to application.scss and add:
#import "bootstrap-sprockets";
#import "bootstrap";
and you're good to go. Oh. Just please don't forget to restart your server.
I am using rails 3.2.12 and created a css file in assets/stylesheets/equipment.css to go along with a controller called equipment_controller.rb. This stylesheet isn't working. What do I need to do to get this included in the pipeline?
The file needs to be loaded into your application.css.
In your application.css file, you will either need to load the file manually (by adding require equipment to the manifest at the top of the file), or it will also be included if you have a require_tree line.
See http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives for more information.
Make sure you have the *= require_tree . in your application.css. It will be responsible to include all stylesheets from the current directory.
I cleared the contents and changed the extension from .css to .css.scss. And now it works.
jquery-ui-rails sounds really helpful as it figures out all the dependencies for the UI components you want and serves up the theme css/images. However, at the end of the Github page linked to above, it talks about the limitations where only the base theme is supported. Loading other themes is apparently "cumbersome, not officially supported by this gem, and adds 1 KB overhead as both the base theme and the custom theme are served up."
Can't I just edit the base theme/images this gem uses and replace it with my own theme from jqueryui.com's ThemeRoller?
You can use your custom theme.
For example:
- delete/comment from application.css this lines
*= require jquery.ui.core
*= require jquery.ui.theme
download theme from http://jqueryui.com/themeroller/
put css file in app/assets/stylesheets/ and you can customize styles
put images in app/assets/images/images/
This didn't work for me. After doing everything that Alexey mentioned, I had to add the following back into the application.css:
*= require jquery-ui.min.css
Obviously, I copied in the .min file into the assets/stylesheets folder from all of the files downloaded with the theme.
ME: Rails 4.2.7, Ruby 2.2
I am trying to port our rails web app to ember.js (we currently do most of the work rendering views on the server side) and I was wondering how to achieve full modularization of the javascript code. So far, the plugin I liked the most was sprockets-commonjs, which automatically creates commonjs modules for all files that are named .module.js . This would solve most of our problems, except for external libraries, which would still declare globals in the code.
The only solution I can think of is to create common.js modules for each of those libraries.
E.g.: Suppose I want to be able to import Ember.js as a Common.js module. I would then create a file called vendor/modules/ember.module.js, that would contain the following:
//= require ember
module.exports = Ember;
I would then import ember_module (along with the rest of the module wrappers) to the application and use them.
//= require_tree vendor/modules
var ember = require("vendor/modules/ember");
This solution is kinda hacky, but it would improve the modularization of the code. Is there a better way to achieve the same results?
In your ember.module.js, try using //= include ember rather than require. The require directive just adds the file as a dependency; the include directive will actually include the file contents in-place. (See https://github.com/sstephenson/sprockets#sprockets-directives).
Otherwise your solution should work :)