I am trying to use the asset pipeline in Rails 4.1 and seem to having a few issues with variables and their scope.
Here is my applications.css.scss
/*
*= require_self
*= require_tree .
*/
#import 'common/mixins';
#import 'common/variables'; /* variable $content-max-width defined here */
.main { height: $content-max-width; } /* works */
#import 'common/content'; /* fails, undefined variable $content-max-width */
I presume I have made a mistake I just don't understand what.
remove the
*= require_tree .
otherwise, you load everything twice and also there is no chance to load it in the correct order. rails just load it in a "random" way and then u most of the time run into errors.
Related
I have installed bootstrap 4.5 into RAILS 6 and I want to extend some styles.
For that I have a file named banana.scss in app/assets/stylesheets that looks like this :
.form-read-only {
#extend .form-control, .form-control-sm;
background-color: rgb(233, 236, 239)
}
Now I want to embed this stylesheet after bootstrap is loaded, so I have modified the app/assets/stylesheets/application.css by
/*
...
*= require banana
*= require_tree .
*= require_self
*/
#import 'bootstrap';
#import 'banana';
But this leads to the error message in the browser to :
Error: The target selector was not found.
Use "#extend .form-control-sm !optional" to avoid this error.
on line 5 of app/assets/stylesheets/banana.scss
>> #extend .form-control, .form-control-sm;
But what is the remmmended way to extand bootstrap ?
I think the only issue is that you *= require banana before you #import 'bootstrap'. Try removing the first one:
/*
...
*= require_tree .
*= require_self
*/
#import 'bootstrap';
#import 'banana';
I've found an easy way to accomplish that.
Just import the bootstrap on the beginning of my custom stylesheet:
#import 'bootstrap';
.form-read-only {
#extend .form-control, .form-control-sm;
background-color: rgb(233, 236, 239)
}
Because I can't define the order in which the stylesheet files are loaded, here I'm sure when the custom stylesheet is loaded, in front of the depending bootstrap stylesheets are loaded at first.
I am using SASS for the first time, and my variables seem to have stopped working. I have the following code in my application.css.scss file:
*= require_self
*/
#import "layout";
#import "colors";
...
#import "text";
In my partial _colors.css.scss file, there is:
...
$ct-white: #F8F8F8 !global;
and in my partial _layout.css.scss file (the Rails default layout file):
/* Site-wide layout syntax */
body {
background-color: $ct-white;
}
I know that the _layout.css.scss file is loading because other styles on the page work fine when I set body { background-color: #F8F8F8; }. For some reason, the variable isn't being parsed correctly.
Any ideas why?
You're importing colors after layout , so the variables you define in colors are not available for layout. You could simply invert the order of those two lines. In SASS, import order matters.
If you're using the sass-rails gem, it uses sass 3.2.0 so !global throws an error.
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.
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/
I am trying to load the OOCSS framework into my new Rails 3.1 application. So far I have clone the project into /vendor/assists/stysheets/oocss, and tried to pull in the project from /app/assists/stylesheets/application.css
/*
* FIXME: Introduce SCSS & Sprockets
*= require ../../../vendor/assets/stylesheets/oocss/all
*= require_self
*= require_tree .
*/
However this does not work properbly, as the compiled css file just contains the two lines that should load the other files.
#import url("core/core.css");
#import url("plugins/plugins.css");
/*
* FIXME: Introduce SCSS & Sprockets
*/
/*
Place all the styles related to the matching controller here.
They will automatically be included in application.css.
You can use Sass (SCSS) here: http://sass-lang.com/
*/
/*
Place all the styles related to the matching controller here.
They will automatically be included in application.css.
You can use Sass (SCSS) here: http://sass-lang.com/
*/
/*
Place all the styles related to the matching controller here.
They will automatically be included in application.css.
You can use Sass (SCSS) here: http://sass-lang.com/
*/
Any ideas on how to pull this off?
UPDATE:
I did a dirty workaround by manually loading the CSS files in the correct order.
app/assets/stylesheets/application.css
/*
* FIXME: Introduce SCSS & Sprockets
*= require ../../../vendor/assets/stylesheets/oocss
*= require_self
*= require_tree .
*/
vendor/assets/stylesheets/oocss.css.scss
/*
* Core
*= require ../../../vendor/assets/stylesheets/oocss/core/libraries.css
*= require ../../../vendor/assets/stylesheets/oocss/core/template/template.css
* require ../../../vendor/assets/stylesheets/oocss/core/template/template_debug.css
*= require ../../../vendor/assets/stylesheets/oocss/core/grid/grids.css
* require ../../../vendor/assets/stylesheets/oocss/core/grid/grids_debug.css
*= require ../../../vendor/assets/stylesheets/oocss/core/module/mod.css
*= require ../../../vendor/assets/stylesheets/oocss/core/module/mod_skins.css
* require ../../../vendor/assets/stylesheets/oocss/core/module/mod_debug.css
*= require ../../../vendor/assets/stylesheets/oocss/core/media/media.css
* require ../../../vendor/assets/stylesheets/oocss/core/media/media_debug.css
*= require ../../../vendor/assets/stylesheets/oocss/core/content.css
*= require ../../../vendor/assets/stylesheets/oocss/core/heading/heading.css
*= require ../../../vendor/assets/stylesheets/oocss/core/spacing/space.css
*= require ../../../vendor/assets/stylesheets/oocss/core/table/table.css
*= require ../../../vendor/assets/stylesheets/oocss/core/table/table_skins.css
* require ../../../vendor/assets/stylesheets/oocss/core/table/table_debug.css
* Plugins
*= require ../../../vendor/assets/stylesheets/oocss/plugins/breadcrumb/breadcrumb.css
*= require ../../../vendor/assets/stylesheets/oocss/plugins/tabs/tabs.css
*= require ../../../vendor/assets/stylesheets/oocss/plugins/talk/talk.css
*= require ../../../vendor/assets/stylesheets/oocss/plugins/talk/talk_skins.css
*/
Best regards.
Asbjørn Morell