I'm using Rails 4. I'm installing formtastic and in the process following the Readme to make changes to the CSS. This is breaking my CSS - my pages are showing but without any formatting at all.
My Application.css file (I removed *= require_tree . per instructions on readme):
*= require_self
# app/assets/stylesheets/application.css
*= require formtastic
*= require my_formtastic_changes
# app/assets/stylesheets/ie6.css
*= require formtastic_ie6
# app/assets/stylesheets/ie7.css
*= require formtastic_ie7
In application.html.erb note I commented out the previous stylesheet and added in a new link:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%# stylesheet_link_tag "application",
"data-turbolinks-track" => true %>
<%= stylesheet_link_tag "application", "formtastic", "my_formtastic_changes" %>
<!--[if IE 6]><%= stylesheet_link_tag 'ie6' %><![endif]-->
<!--[if IE 7]><%= stylesheet_link_tag 'ie7' %><![endif]-->
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
I also added the stylesheet my_formtastic_changes.css.scss, an empty file. I experimented with adding/removing the formtastic and my_formtastic_changes references and using single and double quotes with the stylesheet references - no luck there.
I left the require_tree . line out but had to add in
*= custom
So it loaded the custom stylesheet, including the bootstrap CSS.
Related
I've got a new spree rails 6 application and I can't get any of the sass files to compile. Here's my assets/stylesheets file:
stylesheets
app
_file.scss
_another_file.scss
mixins
_mix-media-queries.scss
_mix-general.scss
modules
_modules_file.scss
application.css
style.scss
application.css:
*= require_tree .
*= require_self
*= require ./style
style.scss:
#import "mixins/_mix-media-queries";
etc...
But when I load the page it give me this error:
Error: Undefined variable: "$color-dark-red". Which is an var in the mixins file.
_head.html.erb:
<title><%= title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<%== meta_image_data_tag %>
<%== meta_data_tags %>
<%= canonical_tag(current_store.url) %>
<%= favicon_link_tag 'favicon.ico' %>
<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag "application", media: "all" %>
<%= csrf_meta_tags %>
<%= render 'spree/shared/paths' %>
<%= javascript_include_tag 'spree/frontend/all', defer: true, 'data-turbolinks-track': 'reload' %>
<%= yield :head %>
This is so frustrating as I cannot get the stupid styles to load! I'm new to rails 6, is this a new rails 6 thing with the asset pipeline?
Sprockets directives do not work well at all with SASS.
When you require SASS files with sprockets it will send the files through the SASS compiler one by one and then concatenate the results together. Of course this blows up as soon as one of your SASS files references a variable, include or function that is declared in any other file.
You need to change the extension of your application.css to .scss and only use SASS #import directives that tells the SASS compiler to pull in the other file.
is this a new rails 6 thing with the asset pipeline?
No. This applies to previous versions of Rails and both SASSC and the old Ruby Sass Compiler.
See:
https://github.com/rails/sass-rails#important-note
Im doing a project from scratch and getting an anoying error that Im dealing without sucess.
Im trying to add a JS file to a page not having sucess.
Those are my files:
#application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
And my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require welcome
//= require_tree .
My welcome.js inside /assets/javascripts:
#/assets/javascripts/welcome.js
$(document).ready(function(){
$('#present').mouseenter(function(){
alert("MouseEnter!"); // This will create an alert box
console.log("MouseEnter!"); // This will log to the JS console on your browser which is a bit nicer to read than alerts, you do not need both, just preference
$(this).fadeIn('fast',1);
});
$('#present').mouseleave(function(){
alert("MouseLeave!"); // This will create an alert box
console.log("MouseLeave!");
$(this).fadeIn('fast',0.5);
});
});
When I run the root page the JS is being shown looking at the inspector. But looks empty (i dont know if this is something usual)
src="/assets/welcome.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"
If I open it using the browser it shows:
(function() {
}).call(this);
Well. Someone know what can I do to make my Javascript works?
Thanks
change your code in your application.html.erb
from:
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
to this:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
I am referencing stylesheets in my index.html.erb file as below
<%= stylesheet_link_tag "/stylesheets/CSS/External/bootstrap.min.css" %>
I have my folder structure as
apps\assests\stylesheets\CSS\Internal
and
apps\assests\stylesheets\CSS\External
But in page, it is rendering as below
<link rel="stylesheet" media="screen" href="/stylesheets/CSS/External/bootstrap.min.css">
Also, I see that my files are rendering twice as attached image
and I get the following errors
First of all, you don't need this line in index.html.erb
<%= stylesheet_link_tag "/stylesheets/CSS/External/bootstrap.min.css" %>
because it's included globally into layouts/application.html.erb something like this
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
For JS
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
This will mapping automatically from assets folder.
If your folder structure like this stylesheets/CSS/External then opens your application.css and add like this
*= require CSS/External/bootstrap.min
after *= require_tree .
You can use Bootstrap Ruby Gem for bootstrap styling, it's simple & easy to implementation based on there doc
Update
For example, the directories are assets/stylesheets/css/external and the css file are inside this directory like
assets/stylesheets/css/external/
...............................bootstrap.css
...............................other.css
and your assets/stylesheets/application.css
/*
*= require_tree .
*= require css/external/bootstrap
*= require css/external/other
*= require_self
*/
I have a rails application which I added the bootstrap gem
first I added this two gems
gem 'bootstrap'
gem 'sprockets-rails', :require => 'sprockets/railtie'
which installed this packages
Using bootstrap 4.0.0.alpha3
Using sprockets 3.6.0
After I modified application.scss to
// Custom bootstrap variables must be set or import before bootstrap itself.
#import "bootstrap";
Then I left application.js like this
// 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.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require tether
//= require bootstrap-sprockets
//= require_tree .
//= require_self
Lastly my application.html.erb is this
<!DOCTYPE html>
<html>
<head>
<title>Squirm</title>
<%= stylesheet_link_tag "bootstrap" %>
<%= javascript_include_tag "bootstrap" %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'partials/navbar' %>
<div class="container">
<%= yield %>
</div>
</body>
</html>
Bootstrap seems to we working, but in the Google Chrome console seems not to be found
You're loading Bootstrap before you've loaded jQuery. Many of Bootstrap's components require javascript (carousel, tabs, etc.), however, most of Bootstrap will work without, which is why the Bootstrap CSS is showing on your page.
Loading Bootstrap after jQuery will fix the issue:
<!DOCTYPE html>
<html>
<head>
<title>Squirm</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag "bootstrap" %>
<%= javascript_include_tag "bootstrap" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'partials/navbar' %>
<div class="container">
<%= yield %>
</div>
</body>
</html>
Also, not 100% sure based on your code, but you may be loading bootstrap twice. It seems this line: //= require bootstrap-sprockets is already loading Bootstrap.
you need to add jquery as well normally jquery come bundled in rails app, but maybe due to some reasons its not thr in your app
add
jquery from
https://cdnjs.com/libraries/jquery/
and let us knwo if this change works.
I'd like to use twitter bootstrap manually, on my rails project.
But I've got this error, and some functions of bootstrap don't work.
If you help me, I appreciate it. Thank you.
Errors on Console
Uncaught TypeError: Cannot read property 'Constructor' of undefined bootstrap-popover.js:38
(anonymous function) bootstrap-popover.js:38
(anonymous function) bootstrap-popover.js:115
app/view/app/index.html.erb
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<%= stylesheet_link_tag "bootstrap" %>
<%= stylesheet_link_tag "bootstrap-responsive" %>
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "bootstrap-transition" %>
<%= javascript_include_tag "bootstrap-alert" %>
<%= javascript_include_tag "bootstrap-modal" %>
<%= javascript_include_tag "bootstrap-dropdown" %>
<%= javascript_include_tag "bootstrap-scrollspy" %>
<%= javascript_include_tag "bootstrap-tab" %>
<%= javascript_include_tag "bootstrap-tooltip" %>
<%= javascript_include_tag "bootstrap-popover" %>
<%= javascript_include_tag "bootstrap-button" %>
<%= javascript_include_tag "bootstrap-collapse" %>
<%= javascript_include_tag "bootstrap-carousel" %>
<%= javascript_include_tag "bootstrap-typeahead" %>
<!-- as example, which doesn't work, somehow -->
<i class="icon-search icon-home"></i>
I believe everything necessary js and css files are in
./app/assets/images
./app/assets/javascripts
./app/assets/stylesheets
If you would like to add asset files ( like .js , .css or images ) in Rails >3 , you should use manifest files : application.js , application.css . After you copy sources in their directories , you should make declarations like this :
application.js :
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-responcive
//= require tree .
and in application.css:
*= require_self
*= require bootstrap
*= require_tree .
It makes useless including `<%= javascript_include_tag %> in your views .