Since scss uses #import in place of require. what can be done to import jquery datatable. I want to add the below code in application.scss file
*= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
This is the application.scss file:
#import "bootstrap-sprockets";
#import "bootstrap";
You would have to look at the source code to figure out if you can do this.
Just because a gem provides assets that can be required by the Rails asset pipeline, doesn't mean that it's written in SASS. The #import is specific to SASS and had to do with building the compiled CSS.
If you look at look at your application.scss when compiled, you'll see your bootstrap mixins as CSS. This is SASS loading the file content and is separate from the Rails asset pipeline.
I would say do not change this… I've used the SASS bootstrap gem and JQuery.DataTable Rails gem together using the described setup.
Because the imports for bootstrap is specific for the library (for example provisioning the colour sets to bootstraps elements), while the *= require has to do with the if's and how's of serving the asset publicly to the web.
The reason your bootstrap mixins are being included into your application is because of require_self.
Related
I am using the webpacker gem (v4.0.7) for assets as is default in Rails 6.
My stylesheet assets are loading via app/javascripts/stylesheets/application.scss file
However, the order of listing of stylesheet assets in this file is not reflected in the compiled css in development, e.g.
application.scss:
#import "~bootstrap/dist/css/bootstrap";
#import "./theme/style.css";
And when I load the page I see the bootstrap stylesheet take precedence over style.css:
Is there a way to control the order of inclusion?
Figured this one out and it's to do with scss rather than webpack(er)
In my application.scss the files I was importing were .css files which were therefore not compiling as such. Changing these to .scss files meant that they were compiled in the order specified.
(This is the article that ultimately led me to a fix: https://vanseodesign.com/css/sass-the-import-directive/)
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.
Learning rails... so I use the bootstrap-sass gem... Where are the actual bootstrap CSS files? Seems like there is some sort of magic going on to include them. What if I want to tweak a property of the CSS....
You're using the bootstrap-sass gem which is preferred by many Rails developers. So the Twitter Bootstrap CSS files are in the gem (in vendor/assets/stylesheets/).
Developers use a gem to include Bootstrap files because it makes things easier to update when new Bootstrap versions are released by simply updating the gem (plus gems are the Rails way, eh?). The bootstrap-sass gem is popular because Sass is the default format for stylesheets in Rails. An alternative is the twitter-bootstrap-rails gem which uses the native Bootstrap LESS format for stylesheets.
Using the gem, you need to modify the file app/assets/javascripts/application.js:
#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
Best practice is to add a file named app/assets/stylesheets/bootstrap_and_overrides.css.scss:
# app/assets/stylesheets/bootstrap_and_overrides.css.scss
#import "bootstrap";
body { padding-top: 60px; }
#import "bootstrap-responsive";
This shows an example of overriding the Bootstrap body style to add padding to accommodate the Bootstrap navigation bar. Then just add application-specific CSS (or Sass) in additional files in app/assets/stylesheets/.
I've written an in-depth article:
Twitter Bootstrap and Rails
that goes into greater details and shows how to set up the application layout, navigation links, Rails flash messages, and form builders for Twitter Bootstrap. The article could be helpful if you want to know more.
Unfortunately, if you use the gem, the css files are hidden from you. If you do a bundle show bootstrap-sass you'll see where the files for the gem are, and you can see the stylesheets being used in there.
If you view the gem's files, you'll see the stylesheets being used in vendor/assets/stylesheets/.
I'd recommend just not using the gem, and getting your own Bootstrap stylesheets and putting them in your application's vendor/assets/stylesheets/.
The CSS files are inside the gem. To include them in your application,
in app/assets/stylesheets/ you can create a file of your choice. (i'll call it bootstrap_overrides.css.scss)
and include the bootstrap source, and override.
#include "bootstrap";
/* here are the overrides if you want to override the styles */
#include "bootstrap-responsive";
and make sure that bootstrap_overrides.css.scss is included in your global application.css file.
I know that Twitter Bootstrap may be customized while downloading it from Bootstrap website. How about bootstrap-sass gem - does it always include all the features?
If you take a look at the documentation, you'll see that you have the option of including all of the js, or only the scripts you want using #= require in your js/coffee files.
https://github.com/thomas-mcdonald/bootstrap-sass#javascripts
Same applies to stylesheets, you can use #import to only include the files you want. You can look at the files architecture here:
https://github.com/thomas-mcdonald/bootstrap-sass/tree/master/vendor/assets/stylesheets
The gem is actually an engine, it basically just adds assets, the same way the jquery-rails gem adds jquery and you can use it as if you had a jquery.js file in your vendor/assets/javascripts folder.
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