I have a Ruby application, and here is my setup:
I have this HAML code:
.alert.alert-info
%p="This is the correct style."
The sidebar.css has this:
/*
* THIS IS THE MANIFEST FILE FOR THE LAYOUT: SIDEBAR
*= require_self
*= require bootstrap
*= require bootstrap-responsive
*= require bootstrap_overrides
*= require layout/buttons
*= require sidebar/base
*/
The web page renders the text "This is the correct style" but not the styling for it.
Here is the page with the styling documentation:
http://twitter.github.com/bootstrap/components.html#alerts
Any idea what I might be missing or need to set up still? The css styles are just not rendering.
Thanks!
Not sure if you use LESS or not, by I import Bootstrap like this:
#import "twitter/bootstrap/bootstrap";
Related
I am trying to incorporate bootstrap 4 into my Rails 5.2 project. Currently, my app/stylesheets/application.css, has the following in it:
/*
*= require_tree .
*= require_self
*/
The instructions, in addition to renaming it application.scss, call for deleting:
*= require_tree .
*= require_self
And adding:
#import 'bootstrap'
Isn't "require_tree ." needed to include all the stylesheets in the stylesheets folder? and the "require_self", to include any styles I may decide to add in the application.scss file?
So if I remove these two statements, would I need to include every single stylesheet individually, using an #import statement. For instance, if I have: user.scss, I would add:
#import 'user'
I've seen some examples where the require_tree and require_self are kept. Your advice is appreciated.
use asterisk to path like
#import "path/to/*"
if you add all sxss in 'stylesheet' path (ex: stylesheet/a.sxss, b.sxss)
#import "*"
else you add all sxss in 'stylesheet/page' path (ex: stylesheet/page/a.sxss, b.sxss)
#import "page/*"
Every now and then I dont even know where to start debugging anymore because i've tried so many things that i'm not sure what worked and what never even worked in the first place.
The problem: When i load a Froala text editor in my application, the editor loads fine, the content submitted through the editor even saves. But the toolbar icons (Font Awesome icons) all display as squares.
What I've tried:
The froala documentation says i should write all those "require"s in the application.css file so i tried changing my application.css.scss to application.css and it WORKS. But i have other sass files i need to import into my application file which is why i have it as application.css.scss
I installed Froala onto the project using the Froala Gem. The editor is initializing which means the require in require froala_editor.min.css is working. Shouldnt this mean my require font-awesome should be working and my icons in the toolbar should be displaying correctly?
I've also tried adding the Font Awesome cdn directly into the application layout but that didnt seem to change anything.
I've tried resetting the cache and using different browsers as well.
It's a very similar problem as this post but i think im doing everything i should be doing to load the font-awesome icons so i'm not sure where i'm going wrong!
Thank you for the help in advance and let me know if I can provide any additional information!
update: i am using froala v2 from this link, following these directions: https://www.froala.com/wysiwyg-editor/docs/framework-plugins/rails
application.css.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 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_self
*= require froala_editor.min.css
*= require froala_style.min.css
*= require font-awesome
*= require plugins/char_counter.min.css
*= require plugins/code_view.min.css
*= require plugins/colors.min.css
*= require plugins/emoticons.min.css
*= require plugins/file.min.css
*= require plugins/fullscreen.min.css
*= require plugins/image_manager.min.css
*= require plugins/image.min.css
*= require plugins/line_breaker.min.css
*= require plugins/quick_insert.min.css
*= require plugins/table.min.css
*= require plugins/video.min.css
*/
I traced the error back to css that i wrote to set the font-family of the <body> to a customized font-family. When i removed it, the squares started displaying as normal! I'm assuming this happens because the font-awesome icons dont know how to display the icons in any other font-family than the one it's created for?
If someone can give me a clear explanation that would be awesome but give this troubleshooting a try if you're experiencing any similar issues!
In my rails5 application, I have application.css.scss and controller specific stylesheets such as home.scss, about.scss etc.
When I check the inspect in my browser, it seems application.css is loaded before home.css and about.css. Because of this, most of the overrides used in applications.css were simply ignored.
application.css.scss
/*
*= require_self
*= require material-design-iconic-font/css/material-design-iconic-font.min
*= require nprogress-turbolinks5
*= require app
*/
How can I load applications.css.scss as the last one in head section?
There is the following code application.css.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
/*
* 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.
*
*= require_tree .
*= require_self
*/
.table tbody > tr > td.vertical-align {
vertical-align: middle;
}
This file is in 'stylesheets' directory. There is also 'home.css.scss' file in the same dir. But if I move this style from 'application' file to 'home' file browser doesn't see this style. What's the trouble? How can I fix it? Thanks!
in my case I have imported bootstrap at the end of the file followed by styles, this must be the problem
*= require_tree .
*= require_self
*/
#import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
#import "bootstrap-sass-official/assets/stylesheets/bootstrap";
.table tbody > tr > td.vertical-align {
vertical-align: middle;
}
also I'd say you should try to put require tree after require self:
*= require_self
*= require_tree .
this makes more sense.
From the Rails Asset Pipeline 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.
http://guides.rubyonrails.org/asset_pipeline.html
So in your case you can move the styles you declared in application.css.scss into a separate file (say: table_styles.css.scss) and then rewrite your manifest file as:
#import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
#import "bootstrap-sass-official/assets/stylesheets/bootstrap";
#import "table_styles";
// Import any other files that would have been imported by require_tree
The advantage of this approach is that you can use sass variables and mixins and you have better control over the load order of your stylesheets.
I have a rail 4 project with "stylesheets/application/index.css.scss" with my all css files:
/*
*= require jquery.ui.all
*= require_tree ../shared
*= require_tree ../design
*= require_tree ../layout
*= require_self
*= require_tree .
*/
rails compile all css in only one, minimized (in prod).
I need to import #import "shared/header" in many files.
exemple: in "stylesheets/layout/main.css.scss"
#import 'shared/header';
.header
{
#extend .header_common_overview;
[...]
}
but I #import 'shared/header' in others files too. The result is :
when rails compile in only one file, there are many times the same rules ".header_common_overview", because I import it in different files.
I tried to put the "import" instruction directly in index.css.scss, but it does't works.
So how can I import only one time a file, and be abble to call the content in all others files?
First, don't use require_tree . You lose control over the include order of your CSS files, potentially leading to cascading issues - styles being overwritten that really should not be.
I've learned to avoid sprockets' require lines in the main SASS files for reasons similar to what you describe.
It can lead to duplication, particularly when using =require_tree all over the place
Variables/mixins/etc... can't be included via sprockets (I'd love to be proven wrong about this though)
In your index.css.scss you might consider simply putting
#import "vendor";
#import "shared";
#import "design";
#import "layout";
// Your main styling here.
#import "another_file";
These #import lines correspond to other sass files. shared.css.scss for example might look like
/*
*=require ./shared/header
*/
The idea is to
Keep clean separation/organization of your asset includes
Explicitly define each asset include so you retain full control over include order
Use SASS #importinstead of Sprockets =require directive to keep variables, mixins, etc... present in an included file available throughout.
My solution is : create all.css.scss with :
/*
*= require jquery.ui.all => static, don't need import
*/
#import 'included/**/*'; //all files included (at first time)
#import 'all/**/*'; //all real css files which requires included file (in second times)
The order is respected and controlled.
The included files is present only one time
the included files are shared in each real css files.
thx for help.