I want to override some properties from the css generated by Zurb Gem. The problem is that there is no link at the application to include these files. So if I put <%= stylesheet_link_tag "application" %> it will load before the hidden css files created by the gem. What can I do to solve that issue?
If you use the new asset pipeline system from Rails since 3.1 version. You can define the order of you loading in your application.css. The order define inside is maintain.
So by example you can do
/*
* = require 'foundation'
* = require 'my_css'
* = require 'my_hack_of_foundation
*/
Of if you use the css in application.css you can require in last of your file
/*
* = require 'foundation'
*/
body {
background: black;
}
/*
* = require 'my_hack_of_foundation
*/
Related
This is a continuation of rails, bootstrap, media-breakpoint-only but I don't think one needs to refer back to that.
I have a Rails project in which I am attempting to use the Bootstrap function media-breakpoint-only.
A search of my computer shows that media-breakpoint-only is defined in ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
My ~/app/assets/stylesheets/application.scss is
/*
* 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.
*
* require_tree .
* require_self
*/
// See
// https://www.youtube.com/watch?v=vcBXXOdPfgE&index=8&list=PLYM1n9xxMy4ClO2GjX73U3BLsXx9Z7wh5
$navbar-default-bg: red;
// Shnelvar
// See https://github.com/twbs/bootstrap-sass
#import "bootstrap-sprockets";
// Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
// Shnelvar
// For ralph-shiny-button etc.
#import "ralph";
// Shnelvar
// See https://stackoverflow.com/questions/33404154/bootstrap-change-the-navbar-font-size
// See https://teamtreehouse.com/community/how-do-you-change-the-bootstrap-font-style
.nav a{
color: white !important;
// font-size: 3.8em !important;
font-size: 2.8em;
}
#import "bootstrap/breakpoints";
// See https://getbootstrap.com/docs/4.0/layout/overview/
h1 {
#include media-breakpoint-only(xs) {
color: red;
}
#include media-breakpoint-only(sm) {
color: green;
}
#include media-breakpoint-only(md) {
color: blue;
}
#include media-breakpoint-only(lg) {
color: yellow;
}
#include media-breakpoint-only(xl) {
color: orange;
}
}
Please note that I have
* require_tree .
* require_self
and not
*= require_tree .
*= require_self
so, I believe, the "requires" are commented out.
When I attempt to load my webpage I get the following error:
Sass::SyntaxError in StaticPages#root
Showing ~/app/views/layouts/application.html.erb where line #15 raised:
File to import not found or unreadable: bootstrap/breakpoints.
Load paths:
~/app/assets/config
~/app/assets/images
~/app/assets/javascripts
~/app/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/coffee-rails-4.2.2/lib/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/jquery-rails-4.3.3/vendor/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actioncable-5.2.0/lib/assets/compiled
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/activestorage-5.2.0/app/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionview-5.2.0/lib/assets/compiled
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/turbolinks-source-5.1.0/lib/assets/javascripts
~/node_modules
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/fonts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/images
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/popper_js-1.14.3/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
Apparently, ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/stylesheets/bootstrap/mixins/ isn't in any of the load paths.
I'm thinking I might have an rbenv error but I'm not sure.
My environment is
Rails 5.2.0
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
Please further note that if I get rid of the #import "bootstrap/breakpoints"; and the h1 css that I am able to use a Bootstrap navbar successfully. Thus, I assume, I have installed bootstrap sucessfully.
Help!!!
in gemfile
gem 'bootstrap-sass', '~> 3.2.0’
then do file inside the stylesheet assets name it bootstrap_and_overrides.css.scss
#import "bootstrap”;
This video can help you about how to add bootstrap gem to your ruby on rails app
https://www.youtube.com/watch?v=mxYsMacHHtU&t=122s
I'm setting up first ruby site in production, everything works ok, but when I run
rake assets:precompile
It adds the css/js in "public/assets/" directory ok, but they have paths and line numbers in the files? So was just wondering how to get it all on one line and without line numbers/comments? Have I missed a setting or anything for this? Here is an example of how my application-428d86248ca363.css comes out:
/* line 1, /home/joe/myapp/app/assets/stylesheets/main.scss */
body {
background: #ccc;
}
/* line 6, /home/joe/myapp/app/assets/stylesheets/main.scss */
#head {
background: #666;
}
/* line 4, /home/joe/myapp/app/assets/stylesheets/welcome.css.scss */
.block {
color: #1e1e1e;
}
/*
* 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 vendor/assets/stylesheets of plugins, if any, 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.
*
*/
Also you can see it includes the big comment at end. How do I get it to go all on one line with no comments?
SCSS
they have paths and line numbers in the files
That's a problem with SCSS which should resolve if you use rake assets:precompile RAILS_ENV=production
Fix
Whilst looking for a reference, I found this answer and this github:
Just to update previous answer, by Chase T.
For me this is not working anymore.
#config/compass.rb
line_comments = false
should become
line_comments = 0
Considering the resource uses compass.rb, I looked to see how to do it in a standard Rails app. I found the way to do it is to use a system, and looks like you can use this command:
#config/application.rb
config.sass.line_comments = false
This is confirmed with this information:
Using Rails 4.1 and after looking and looking (and possibly misreading
the documentation) I got this to work by adding the following to
/config/environments/development.rd & production.rb
config.sass.preferred_syntax = :scss
config.sass.style = :compact
config.sass.line_comments = false
Style can be set to :nested,
:expanded, :compact, :compressed. You can see the different options
here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
Also, make sure to restart your server to see the compiled version
change
Hope this helps someone.
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.
I'm looking for a way to use the Less Preboot mixins in my Rails project.
Gems Gemfile:
gem "less-rails"
gem "twitter-bootstrap-rails"
Layout application.html.erb:
<%= stylesheet_link_tag "application", :media => "all" %>
Stylesheet application.css.less.erb:
/*
*= require bootstrap_and_overrides
*= require_self
*/
.navbar .navbar-inner {
#gradient > .vertical(#333,#000);
}
But the Preboot mixin #gradient > .vertical is not found, giving this error:
#gradient > .vertical is undefined
(in */app/assets/stylesheets/application.css.less.erb)
The Bootstrap Github page tells me it was built with Preboot:
"Bootstrap was built with Preboot" (Source: https://github.com/seyhunak/twitter-bootstrap-rails#using-with-less)
I believe you have to define - override the styles provided by Twitter Bootstrap - all the css components in the bootstrap_and_overrides.css.less file. You can create your ids and classes through your application and define the style in this file... Well, this is the way I use twitter-bootstrap-rails...
There are other options... this article compare some of them: http://rubysource.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/
Also, there is a very good railscast about it: http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast
If you want to use the Preboot mixins in your Rails project with twitter bootstrap you need to add the following to the top of the LESS file you want to use them in:
#import "twitter/bootstrap/variables";
#import "twitter/bootstrap/mixins";
After this you are able to use the gradients, and all other Preboot mixins:
#content {
#gradient > .vertical( #eee, #ccc );
}
Here is my tree
stylesheets/
admin/
admin.scss
bootstrap_and_overrides.css.less
application.css.scss
categoria.css.scss
categories.css.scss
comments.css.scss
groups.css.scss
home.css.scss
ie.css.scss
images.css.scss
images.js.coffee
specs.css.scss
1 -> Is it possible (in application.css) to don`t load bootstrap_and_overrides.css.less?
My problem is..
my app have two layouts, one of then called admin, i would like to load bootstrap only in this layout, not for all application..
everyone?
You could add all your file separately in your application.css.scss, without bootstrap_and_overrides, like this :
/**
* application-print.css
*
*= require categoria
*= require categories
...
*/
and include bootstrap_and_overrides separtely
you could place your files in a directory and use require_tree ./normal/