I'm building a Rails application and I decided to use bootstrap and sass.
I follow the guide on the github page:
https://github.com/twbs/bootstrap-sass
So, now i have my gem installed ('bootstrap-sass', 'sass-rails'), my application.css (now application.sass) looks like this:
1 #import "bootstrap-sprockets";
2 #import "bootstrap";
My application.js file looks like this:
1 // This is a manifest file that'll be compiled into application.js, which will include all the files
2 // listed below.
3 //
4 // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5 // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
6 //
7 // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8 // compiled file.
9 //
10 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
11 // about supported directives.
12 //
13 //= require jquery
14 //= require jquery_ujs
15 //= require turbolinks
16 //= require bootstrap-sprockets
17 //= require_tree .
And then the guide pretty much ends.
The problem is that I don't have bootstrap in my application(I can't see it anywhere in the page by viewing the source) and I do not know how to use sass.
What should I do next? Did I miss something?
It sounds like it should all be ready to go but you will have to start writing some code that it can apply. Perhaps test it with this. In your application.html.erb file under body put the following:
<div id="container">
<div class="main">
<h1>Main Content</h1>
</div>
then in the css file try this
#container {
.main {
width:600px;
h1 {
color: $red;
}
}
Make sure you have restarted your server after the bundle install.
The list of bootstrap variables can be found here http://getbootstrap.com/customize/#less-variables
I found the error: I wrote all the import tag between the html
<title>
tag instead of the
<head>
tag.
Related
I'm trying to implement jQuery Datepicker into my Rails 5.1.3 app, but I get this error message:
ActionView::Template::Error at /users/2/absences/new File to import
not found or unreadable: jquery-ui/widgets/datepicker. Load paths:
/Users/acandael/Sites/absence_registrator/app/assets/config
/Users/acandael/Sites/absence_registrator/app/assets/images
/Users/acandael/Sites/absence_registrator/app/assets/javascripts
/Users/acandael/Sites/absence_registrator/app/assets/stylesheets
I have added the jquery-ui-rails gem to the Gemfile
Then I configured the app/assets/javascripts/application.js file:
//= require jquery-ui/widgets/datepicker
and I also configured the app/assets/stylesheets/application.scss file:
#import "jquery-ui/widgets/datepicker";
finaly I configured the Datepicker in the view template:
<%= f.text_field :date, class: "form-control", id: "datepicker" %>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Update
I made some progress by changing
//= require jquery-ui/widgets/datepicker
to
//= require jquery-ui/datepicker
in app/assets/javascripts/application.js
In app/assets/stylesheets/application.scss
I changed
#import "jquery-ui/widgets/datepicker";
to
/*
*= require jquery-ui/datepicker
*/
but the Datepicker that appears is not styled.
So my question now is how implement css styling for the Datepicker
Update
I fixed the styling issue by importing:
#import 'jquery-ui/datepicker.css';
into app/assets/stylesheets/application.scss
Thanks for your help,
Anthony
I tried your approach and several others. They all error'd out or didn't show the JS control where they should.
Ultimately I used this gem instead, and followed their pretty simple instructions and success! Rail 5.0.6.
https://github.com/TrevorS/bootstrap3-datetimepicker-rails
I have a really interesting problem with sprockets. First of all, this is the following error message I have got.
couldn't find file 'jquery.themepunch.plugins.min' with type 'application/javascript'
Checked in these paths:
Here is the interesting part. It says a javascript plugin cannot be found, but the problem is caused in the line 13, which has a stylesheet_link_tag. How could it be possible?
Anyway, I have frontend.js and frontend.css files. Here is the content of files.
frontend.css
/*
*= require css/style
*= require css/colors/red
*= require_self
*/
frontend.js
// require scripts/jquery.themepunch.plugins.min
// require scripts/jquery.themepunch.revolution.min
// require scripts/jquery.themepunch.showbizpro.min
// require scripts/jquery.easing.min
// require scripts/jquery.tooltips.min
// require scripts/jquery.magnific-popup.min
// require scripts/jquery.superfish
// require scripts/jquery.flexslider
// require scripts/jquery.jpanelmenu
// require scripts/jquery.isotope.min
// require scripts/custom
I purposely changed //= to // in order to cancel the inclution of javascript plugins.
EDIT 1:
Here is my assets paths:
[1] pry(main)> Rails.application.config.assets.paths
=> ["/ssd/Projects/my_app/app/assets/fonts",
"/ssd/Projects/my_app/app/assets/images",
"/ssd/Projects/my_app/app/assets/javascripts",
"/ssd/Projects/my_app/app/assets/stylesheets",
"/ssd/Projects/my_app/vendor/assets/astrum",
"/ssd/Projects/my_app/vendor/assets/javascripts",
"/ssd/Projects/my_app/vendor/assets/metronic_v4.7.5",
"/ssd/Projects/my_app/vendor/assets/stylesheets",
"/home/bunyamin/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/font-kit-rails-1.2.0/app/assets/fonts",
"/home/bunyamin/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/font-kit-rails-1.2.0/app/assets/stylesheets",
"/home/bunyamin/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/jquery-rails-4.3.1/vendor/assets/javascripts",
"/home/bunyamin/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/coffee-rails-4.1.1/lib/assets/javascripts",
"/ssd/Projects/my_app/vendor/assets/astrum"]
I am really stuck. How can I solve this problem? Would anyone please help? I am not requiring any javascript plugins as you can see, yet I get file not found error.
Sprockets really does not give a useful error message. I have forgot an application.js file in one of assets folder. And it automatically runs it, even though I am not calling.
Then it shows error message as if the stylesheet file is the cause.
Anyway, after removing application.js my problem is solved.
i already install asset-pipeline:1.8.10.
i'm confusing how to call css and javascript. i already googling. i found this video
but i havenot understood.
at folder grails-app/asset/stylesheets have based.css,bootstrap.css, main.css. last i create new file with application.css
but i only add this code to application.css
/*
*require bootstrap
*require based
*main.css
*require jquery-ui.custom
*require bootstrap
*require_self
*require_tree
*/
in gsp i use <asset:stylesheet src="application.css" />
but it likes not work. because the page is blank.
example :
grails-app/asset/stylesheets have based.css
based.css coding is
body
{
#FF0000;
}
at index.gsp
i call <asset:stylesheet src="application.css" />
then how about application's content?
there are a couple of things wrong in your application.css, first why do you import bootstrap twice? the second thing is, that you use require_tree with no folder given like: "require_tree . " or "require_tree subfolder"
here should be a working example:
/*
*require bootstrap
*require_tree .
*/
with a given folder structure like:
/grails-app/assets/stylesheets/
/application.css
/based.css
/main.css
and the bootstrap plugin required via BuildConfig.groovy.
The other aproach is to require different stuff directly instead of using the require_tree directive:
/*
*require bootstrap
*require based
*require main
*/
I bought a theme and want to apply the whole theme into my site.
I put the line in the scss file
*= require_tree ../../../vendor/assets/lenord-single-page-theme/css
but it didn't include the folder I want
Rails.application.config.assets.paths
=> ["pixnet_hackathon/website/dqa_streesful_server/app/assets/ace-admin-theme",
"pixnet_hackathon/website/dqa_streesful_server/app/assets/images",
"pixnet_hackathon/website/dqa_streesful_server/app/assets/javascripts",
"pixnet_hackathon/website/dqa_streesful_server/app/assets/lenord-single-page-theme",
"pixnet_hackathon/website/dqa_streesful_server/app/assets/stylesheets",
"pixnet_hackathon/website/dqa_streesful_server/vendor/assets/javascripts",
"pixnet_hackathon/website/dqa_streesful_server/vendor/assets/stylesheets",
".rvm/gems/ruby-2.1.0/gems/simple-navigation-bootstrap-1.0.0/vendor/assets/stylesheets",
".rvm/gems/ruby-2.1.0/gems/bourbon-3.1.8/app/assets/stylesheets",
".rvm/gems/ruby-2.1.0/gems/tinymce-rails-4.0.19/app/assets/javascripts",
".rvm/gems/ruby-2.1.0/gems/tinymce-rails-4.0.19/app/assets/source",
".rvm/gems/ruby-2.1.0/gems/tinymce-rails-4.0.19/vendor/assets/javascripts",
".rvm/gems/ruby-2.1.0/gems/bootstrap-sass-3.1.1.0/vendor/assets/fonts",
".rvm/gems/ruby-2.1.0/gems/bootstrap-sass-3.1.1.0/vendor/assets/javascripts",
".rvm/gems/ruby-2.1.0/gems/bootstrap-sass-3.1.1.0/vendor/assets/stylesheets",
".rvm/gems/ruby-2.1.0/gems/turbolinks-2.2.2/lib/assets/javascripts",
".rvm/gems/ruby-2.1.0/gems/jquery-rails-3.1.0/vendor/assets/javascripts",
".rvm/gems/ruby-2.1.0/gems/coffee-rails-4.0.1/lib/assets/javascripts"]
Just refer it using:
//= require_tree ../../../vendor/assets/lenord-single-page-theme/css/.
Hope it helps :)
I have a Rails 4 app, using the foundation-rails v5.2.1.0 gem, and one custom SCSS file for my application layout. When I use a variable from the foundation_and_overrides.scss file, I get the following error:
Undefined variable: "$header-font-family"
I've included relevant code below. I can post more if needed. Anyone know what's going on here?
From application.css:
*
*= require foundation_and_overrides
*= require_self
*= require_tree .
*/
From foundation_and_overrides.scss:
// We use these to control header font styles
$header-font-family: "futura-pt", sans-serif;
$header-font-weight: 400;
// $header-font-style: normal;
From custom.css.scss:
$include-html-global-classes: false;
#import "foundation/components/global";
.
.
.
.footer {
background-color: black;
color: white;
height: 100px;
font-family: $header-font-family;
}
You are getting the error because foundation_and_overrides.scss is executing after custom.css.scss. Best way to do this is to define your variables in a partial and import it in your main stylesheet after foundation.
First change the file name from
foundation_and_overrides.scss to _foundation_and_overrides.scss
and then import it in custom.css.scss file after foundation with
#import 'foundation_and_overrides';
Update
Rename your application.css to application.css.scss and custom.css.scss to custom.scss
In your application.css.scss remove *= require_tree .
And then import your main stylesheet with
#import 'custom'
I hope this helps
The cleanest way is to add the line
#import "custom";
to your file foundation_and_overrides.scss before the line
#import "foundation";
There's no need to remove *= require_tree . from application.css.scss as stated in the accepted answer. There's also no need to add require foundation_and_overrides to application.css if you leave require_tree . in there.
According to the Rails Docs:
If you want to use multiple Sass files, you should generally use the Sass >#import rule instead of these Sprockets directives. When using Sprockets >directives, Sass files exist within their own scope, making variables or >mixins only available within the document they were defined in.
So in this case the order of the directives (the lines in application.css that start with *=) doesn't matter because each of those files lives in its own scope and you can't access their variables from another scss file. That's why you want to either #import foundation_and_overrides and then custom, or #import your custom stylesheet into foundation_and_overrides.