Or they are? When I use inspect element on any bootstrap component it's taking CSS from application.css (not bootstrap itself). I'm pretty sure I did something wrong when installing even though I went through the guidelines a few times.
Forgot to add I'm using Rails 4.2.6 and using the gem from:
https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails
This is what I mean, for example the btn classes are working but they do not point to Bootstrap in inspect element but rather to application.css. Also the navbar (copy paste from getbootstrap.com) works as far as javascript dropdowns go but CSS is off.
Gemfile
#Bootstrap V4 Alpha
gem 'bootstrap', '~> 4.0.0.alpha6'
* sprockets-rails (3.2.0)
application.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*/
#import "bootstrap";
application.js
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap
In your application.js file place //= require bootstrap after //= require jquery so the file will be look like this:
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Restart your rails server and the changing will take effect.
Look very closely at your application.css file's comments.
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
This is why it appears as though all the css is coming from the application.css, but you are importing the bootstrap css at the bottom of the file..
Related
I had no luck with the official TBS gem.
Instead, I've installed all of the required .js and .scss files in my vendor directory.
in my applications.css.scss, I have...
#import "bootstrap/scss/bootstrap";
#import "historical-bs-custom";
the other SASS files are also within the /scss directory above.
These are the components I thought would get loaded by the #import statements in the main bootstrap.scss by default. Ex. _alert.scss, _badge.scss, etc.
in my application.js, I have...
//= require rails-ujs
//= require turbolinks
//= require jquery-3.3.1.slim.min
//= require popper.min
//= require bootstrap/bootstrap
//= require_tree .
Seen in source code view of the page, .js loads fine, but my CSS does not at all.
My gemfile specifies that it is using
gem 'sass-rails', '~> 5.0'
I thought this would be enough to preprocess the SASS. I also added the
# Bootsrap sass specific gem
gem 'bootstrap-sass'
but had no luck.
I was hoping to be able to use SASS variables along with custom CSS rules for this application. Most of the documentation on the internets relates to gem usage, which I found I was not the only one having trouble with.
Anyone out there trying to do such a thing without a gem?
Any advice or insight would be greatly appreciated.
Thanks in advance.
I was able to get the SASS to preprocess by amending the code as seen below, using the #import statements outside of the initial default commenting that are in application.css.scss files.
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
#import "bootstrap/scss/bootstrap";
#import "historical-bs-custom";
#import "test";
At first, when using VSCode, I got bad syntax highlighting, so I backed off. A very nice coworker and friend had me try this again. Now I can get on with my life.
Relevant part of GemFile:
Bundle install:
And still no effect:
From \app\views\layouts\application.html.erb:
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
How do I load Bootstrap styling?
Seems youre missing to import bootstrap styles. To solve this according to the bootstrap-sass documentation you should:
Import Bootstrap styles in app/assets/stylesheets/application.scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
bootstrap-sprockets must be imported before bootstrap for the icon fonts to work.
Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead
First you should decide which gem to use, twitter-bootstrap-rails or bootstrap-sass, not both.
Let's say you use bootstrap-sass then in your application.js should be
//= require bootstrap-sprockets
not
//= require twitter/bootstrap
and then add
#import "bootstrap-sprockets";
#import "bootstrap";
to your app/assets/stylesheets/application.scss like R. Sierra said.
Now your app should be good to go!
There are already similar questions on SO, but not enough clear responses to understand the following issue.
My goal is to setup Rails 5 with Bootstrap using Bower.
Using Bower I installed Bootstrap in the the folder:
vendor/assets/bower_components/bootstrap-sass
Then, I updated initializers/assets:
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
Then I added the gem 'sass-rails' to Gemfile and updated application.js:
//= require jquery
//= require bootstrap-sass/assets/javascripts/bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .
The assets for JS seem to be working well: if I load http://localhost:3000/assets/application.js
I can see that the Bootstrap JS part has been added there.
The problem is about Sass (SCSS):
I added bootstrap-sass/assets/stylesheets/bootstrap into application.css.scss but with no success:
/*
*= require_tree .
*= require_self
#import "bootstrap-sass/assets/stylesheets/bootstrap";
*/
in fact if I load http://localhost:3000/assets/application.css I see:
/*
#import "bootstrap-sass/assets/stylesheets/bootstrap";
*/
(the folder specified on the #import is containing many _*.scss files and a mixins folder)
The questions are:
Do you have any ideas why this is not working?
should not I see on assets/application.css all the CSS precompiled?
PS:
Any resource to understand the issue would be much appreciated.
Move the import, so it's outside the /* .. */
/*
*= require_tree .
*= require_self
*/
#import "bootstrap-sass/assets/stylesheets/bootstrap";
[Removed misleading instructions to use require instead of import, as I was wrong.]
In addition to the accepted answer, if you look into the bootstrap-sass/assets/stylesheets directory, you'll notice that there is no file bootstrap.scss but rather one prefixed with an underscore.
Also, usually it's better to import only modules you actually need from the bootstrap-sass/assets/stylesheets/bootstrap/ directory instead of the main _bootstrap.scss file.
I know this type of question has come up before on SO, and I have tried every solution I could find, but nothing seems to work. The javascript is working fine, but for some reason, I can't get the datepicker window to go in the right spot or format correctly. After testing multiple gems, I keep getting this:
There are no errors in my console. Here is what my related gems look like in my Gemfile:
gem 'jquery-rails', "~> 2.3.0"
gem 'bootstrap-sass'
gem 'bootstrap-datepicker-rails'
And here is my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap-datepicker
//= require_self
And my application.css has:
*= require bootstrap-datepicker
As for the actual html file, it looks like this (application#index.html)
<input type="text" data-behaviour='datepicker' >
<script type="text/javascript">
$(document).ready(function(){
$('[data-behaviour~=datepicker]').datepicker();
})
</script>
Any and all ideas are welcome.
UPDATE:
It seems like my bootstrap css files aren't loading at all. Do I need to use css.scss files? I can't seem to find a straightforward answer online. Manually inserting the css into my application.css file results in this:
Just for a sanity check give the standard jquery datepicker a shot. I generally use it with bootstrap.
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require jquery.ui.datepicker
//= require jquery.timepicker.js
//= require_tree .
app/assets/stylesheets/application.css
*= require jquery.ui.datepicker
*= require jquery.timepicker.css
*= require_self
*= require_tree .
app/assets/javascripts/your_model.js.coffee
jQuery ->
$("#div_id_here").datepicker dateFormat: "yy-mm-dd"
Since you're using bootstrap-sass, you can (and should) use #import statements instead of *= require statements for your css.scss files. This allows you to define and use variables, etc amongst all of your css.scss files, which allows for full customization of Bootstrap and its components. I'm not sure if there could be something else wrong with your configuration... but I'd suggest starting here anyway since none of your css is showing up. So your application.css.scss file would look like:
# #import any file that may contain variables you'd like to use in any libraries
# added below this point (e.g. `defines.css.css`)
#import "bootstrap_and_overrides";
#import "bootstrap-datepicker";
# #import "whatever other .css.scss files you have...";
Then in bootstrap.css.scss you'd individually import each of the desired bootstrap CSS components after "overriding" any variables. Here is what you need to start from:
variables (this is the basis your variable/style "overrides", placed at the tope of your bootstrap_and_overrides.css.scss file.)
bootstrap components (this is the core of your bootstrap_and_overrides.css.scss file.)
I'm studying assets precompile and I'm confused.
Let' say I created a new application like rails new dummy.
This is the generated app/assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
It says This is a manifest file that'll be compiled into application.js. It's still clear up to this point, but I found out that there's another configuration that we can set under config/application.rb: config.assets.precompile << \some_regex\.
Now I'm unclear what's the difference between changing application.js vs config.assets.precompile for selecting what to be compiled.
I feel like I'm missing the bigger picture here, can someone help to explain this?
The application.js file is for Javascript, as the name suggests. Because of the lines below in the file, jquery, jquery_ujs, turbolinks javascript library, and every Javascript files in your /app/assets/javascripts folder will be pre-compiled.
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
You can use the "config.assets.precompile" to add other things to be pre-compiled such as font files and other files that are not recognized by Rails by default. You can use it to include javascript files as well. But, such needs are rare.
An example of it would be....
config.assets.precompile += %w( .svg .eot .woff .ttf )
I hope this makes sense.