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.
Related
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.
I cant seem to figure out what i am doing wrong. I have added custom files. I have tried to override the current ones.
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
*/
i should be able to just add another style sheet correct?
What i had to do was add
#import '<insert file name here>'
It then worked.
I have got some Bootstrap functionality up and running on my app. So far so good. I know that the 2 defaults colors for the navbar are black and white,using navbar-default and navbar-inverse. I am trying to add the navbar color change CSS to the assets/stlyesheets/application.css file, but not having any luck. the color im changing it to is green. ( an irrigation system website. Green for grass, yay)
this is what my application.css file currently looks like.
/*
* This is a manifest file that'll be compiled into application.css, which will include all the
files listed below
* 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 top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*/
.navbar-default {
background-color: #33FF33;
border-color: #E7E7E7;
}
Create a new file under app/assets/stylesheets, add your custom styles to the file, then include it in application.css.scss.
#import custom_navbar.css.scss;
You will want to change application.css to application.css.scss and remove the comments entirely. You will then import the files you want using the #import directive.
Note that this somewhat breaks away from convention, but it might work for your purposes. You can read more about structuring SASS projects on the SASS blog.
If you are using the bootstrap-sass gem (you should), the right way to do this, is to set the bootstrap variables, in your application.css.scss, before including bootstrap:
$navbar-default-bg: #33FF33;
$navbar-default-border: #E7E7E7;
#import "bootstrap";
I used to put everything into application.css before and it worked. But now I wanted to use some nice dropdown menus in my app and the css for it is huuge. So I made a new css file just for the dropdown menus in the same folder where application.css is: stylesheets
It seems now that rails does not load the newly created css file. How can I make it load every file in the folder?
Use the default application.css file, it includes all .css files in the assets directories:
/*
* 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 top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*/
put those two lines into application.css:
*= require_self
*= require_tree .
*= require tree . will require all css files in app/assets/stylesheets , lib/assets/stylesheets and vendor/assets/stylesheets
I'm using sass imports to handle most of my styles for our rails 3.2 app. My application.css.scss file looks like this:
application.css
/*
*= require_self
*= require_tree ./vendor
*= require admin
*/
admin.css.scss
// Reset
#import "global/reset";
// General Variables
#import "admin/general/_variables";
// Main Elements
#import "admin/general/_typography";
// Layout
#import "global/_layout";
#import "admin/general/_gridset";
// Modules
#import "admin/modules/_table";
#import "admin/modules/_forms";
#import "admin/modules/_buttons";
// Styles
#import "admin/_style-clean";
#import "admin/_style-images";
// Features
#import "admin/features/features";
Error message: Sass::SyntaxError - Undefined variable: "$body-bg".
(in /var/www/apps/dev_wbs/releases/20130624191222/app/assets/stylesheets/admin/_style-clean.css.scss)
_variables.css.scss (imported) contains $body-bg, and it is referenced in _style-clean.css.scss
I originally had this in the sass syntax, but every time we push to the dev server, we get an error of Sass::SyntaxError - Undefined variable: "$body-bg". The variable is declared in the variables file, and the error comes from the _style-clean scss file. I've dropped this variable into the style-clean file, but then I get another variable error, but it refers to one in the typography file, which is above the style-clean, making me think somehow that the assets are being pre-compiled and then added.
I'd like to go back to using sass syntax, but both scss and sass throw variable errors.
All individual files are currently in the format of: _variables.css.scss.
Any help would be appreciated!
The asset pipeline relies on application.css to tell it what files to include. Changing it to SASS probably wouldn't allow that to work.
Also, your application.css needs to tell Ruby where to look for 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, 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 top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*/
If you put the code you pasted in your question into a new file like global.css.scss and recreate the application.css in /app/assets/stylesheets/ you should be off to the races both with the above code and SASS styles as well.