I'm building a rails/bootstrap app. My application.css.scss.erb "manifest" file currently simply includes bootstrap, the scaffolds css, and my custom file "dryclean.css":
#import "bootstrap-sprockets";
#import "bootstrap";
#import "scaffolds.css.scss";
#import "dryclean.css"
Unfortunately, bootstrap is overwriting my custom logic, despite my stuff being further down the import list.
app.css.scss:
/*
*= require_self
*= require dryclean
*= require scaffolds
*/
#import "bootstrap_override";
/* if you do not need override boostrap behaviour, just import boostrap here */
bootstrap_override.css.scss:
#import "bootstrap";
/* Your bootstrap extentions goes here */
Actually you should override every style sheet you use within your app. That gives you the opportunity to have compatible code between bootstrap versions. Consider a case when some style sheet in newer boostrap version changes, for instance .btn becomes .button. Then you have to change it the whole app. On the other hand, you may deal with it only within your css.scss:
.btn {
#extend .btn;
}
Related
I'm trying to import my css/sass files in order. Somehow my css gets messed up as my bulma framework imports, overwrites all classes coming later.
require("./index.scss");
in my index.scss i Import bulma (framerwork) first and after this an entryPoint.scss which imports other sass/css files from the assets directory.
#import '~bulma/bulma';
#import 'app/assets/sass/entryPoint.scss';
and my entryPoint.scss
#import "helper/_helper.scss";
#import "helper/_spacing.scss";
#import "global/global.scss";
Somehow later imported classes are overwritten my the main classes imported by bulma in my index.scss. All classes in "helper" are overwritten by the main classes in the bulma framework.
Any ideas? I'm using the create-react-app npm script.
What classes are being overriden? My hunch is that you are trying to compete with Bulma classes that are marked with the important rule. If you intend to override these classes in a later file, you will likewise have to mark them as !important. That being sad, I would avoid throwing around the important rule unless absolutely necessary as it is easy to misuse.
In your case, I would try the following:
index.scss
#import "../node_modules/bulma/bulma";
#import "./helpers";
helpers.scss
.is-marginless {
margin: 3em !important;
}
Anybody knows how to override bootstrap css based on variables.less variables value on client side. After compilation of bootstrap.less it is taking variables.less values but I want to override bootstrap.css or any custom.css.
If you are working with LESS (or SASS), just import bootstrap less files and put your custom variables less after bootstrap's one:
// Core variables and mixins
#import "variables.less";
#import "myCustomVars.less"; // YOUR CUSTOM VARS
#import "mixins.less";
// Core CSS
#import "scaffolding.less";
ETC....
I'm a newbie in ruby developement so sorry in advance if my question isn't less precise at the first time.
I try to apply a css style but the way I'm using doesn't work as I think it should.
index.html.erb from home controller app/views/home
<div class="box_home">
...
...
</div>
home.scss app/assets/styelsheets
.box_home { margin-bottom: 20px; }
application.scss app/assets/styelsheets
#import "bootstrap-sprockets";
#import "bootstrap";
body { padding-top: 50px; }
.box_home { margin-bottom: 20px; }
Nothing happend like that. But if I insert the css property in application.scss it works.
Is it the right way to do or should I decentralize styles in each controller's scss files ? If yes, how ?
I tried to find docs or older Q&A but I didn't.
Thanks in advance for your help.
Did you require this file inside application.css?
*= require home
If you are working with SCSS files, you should actually use #import instead of require in your application.scss
#import "bootstrap-sprockets";
#import "bootstrap";
#import "home";
// ...
From the rails asset pipeline documentation
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.
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'm using LESS. From Google PageSpeed I've learnt that, using #import in CSS file will hamper the site speed. So I'd like to exclude any #import thing from my CSS. I have 2 different stylesheets reset.css, and rebuild.css - to avoid #import I copied all of their code into my main stylesheet. So the real styles of my site got below many code and that's a problem. So I need the two stylesheets to #import into the styles.less (main stylesheet) file, in a way, so that, they actually won't generate any #import when I'm compiling them with WinLESS into pure styles.css. I want them to insert physically into the style.css when I'll compile the styles.less into styles.css.
I want styles.less like:
#import('reset.css');
#import('rebuild.css');
/* SITE STYLES HERE */
But want the rendered styles.css to be:
code from reset.css
code from rebuild.css
/* THEN, SITE STYLES HERE */
I'm using WinLESS to compile the CSS file from LESS, and NOT USING .less with JavaScript directly, but using the styles.css only.
The simplest way:
#import (less) 'reset.css';
#import (less) 'rebuild.css';
/* SITE STYLES HERE */
You can just use an import statement in your less file. it will be included (css code is inserted) in your result css file.
read more on winless example page (click on Importing)
Example:
styles.less:
#import('other.less');
.myOtherClass {
// other rules
}
other.less:
.myClass {
// rules
}
after compiling using winless (or any other less compiler); result.css:
.myClass {
// rules
}
.myOtherClass {
// other rules
}