What is the best way to override variables?
I found the following order works:
#import "bootstrap/_functions.scss";
$primary: red;
#import "bootstrap/_variables.scss";
#import "bootstrap/_mixins.scss";
But what if I want to use a variable from Bootstrap? For example:
#import "bootstrap/_functions.scss";
$primary: $red;
#import "bootstrap/_variables.scss";
#import "bootstrap/_mixins.scss";
This doesn't compile because the $red variable isn't defined.
I've tried this order:
#import "bootstrap/_functions.scss";
#import "bootstrap/_variables.scss";
#import "bootstrap/_mixins.scss";
$primary: $red;
Which works but only for some elements. For example bootstap/_variables.scss includes:
$link-color: $primary !default;
The $link-colour variable doesn't use the override and instead uses the default value.
Any ideas?
I normally use a structure like below, /src/scss/core is my custom sass directory:
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
#import "../../node_modules/bootstrap/scss/functions";
#import "../../node_modules/bootstrap/scss/variables";
// 2. Include any default variable overrides here
#import "core/variables"; // Custom theme variables
#import "core/variables-bootstrap"; // Bootstrap variables overrides
// Mixins
#import "../../node_modules/bootstrap/scss/mixins";
#import "core/mixins.scss";
// Bootstrap core
#import "../../node_modules/bootstrap/scss/utilities";
#import "../../node_modules/bootstrap/scss/root";
#import "../../node_modules/bootstrap/scss/reboot";
#import "../../node_modules/bootstrap/scss/type";
#import "../../node_modules/bootstrap/scss/images";
#import "../../node_modules/bootstrap/scss/containers";
#import "../../node_modules/bootstrap/scss/grid";
#import "../../node_modules/bootstrap/scss/tables";
#import "../../node_modules/bootstrap/scss/forms";
#import "../../node_modules/bootstrap/scss/buttons";
#import "../../node_modules/bootstrap/scss/transitions";
#import "../../node_modules/bootstrap/scss/dropdown";
#import "../../node_modules/bootstrap/scss/button-group";
#import "../../node_modules/bootstrap/scss/nav";
#import "../../node_modules/bootstrap/scss/navbar";
#import "../../node_modules/bootstrap/scss/card";
#import "../../node_modules/bootstrap/scss/accordion";
#import "../../node_modules/bootstrap/scss/breadcrumb";
#import "../../node_modules/bootstrap/scss/pagination";
#import "../../node_modules/bootstrap/scss/badge";
#import "../../node_modules/bootstrap/scss/alert";
#import "../../node_modules/bootstrap/scss/progress";
#import "../../node_modules/bootstrap/scss/list-group";
#import "../../node_modules/bootstrap/scss/close";
#import "../../node_modules/bootstrap/scss/toasts";
#import "../../node_modules/bootstrap/scss/modal";
#import "../../node_modules/bootstrap/scss/tooltip";
#import "../../node_modules/bootstrap/scss/popover";
#import "../../node_modules/bootstrap/scss/carousel";
#import "../../node_modules/bootstrap/scss/spinners";
#import "../../node_modules/bootstrap/scss/offcanvas";
#import "../../node_modules/bootstrap/scss/placeholders";
// Helpers
#import "../../node_modules/bootstrap/scss/helpers";
// Utilities
#import "../../node_modules/bootstrap/scss/utilities/api";
This structure works for me with variable overrides/extending but like Zim said you'd need to override $link-hover-color too since it's default value is set before you defined your custom $primary colour (at least that's my understanding of the !default flag).
$primary: $red;
$link-color: $primary;
$link-hover-color: shift-color($link-color, $link-shade-percentage);
Bootstrap 5
I think you'd have to set any other vars that use $link-color (ie: $btn-link-color) and merge the new colors into the $theme-colors map...
#import "functions";
#import "variables";
#import "mixins";
$primary: $red;
$link-color: $primary;
$btn-link-color: $primary;
$theme-colors: map-merge(
$theme-colors,
(
"primary": $primary
)
);
#import "bootstrap";
Demo
Related
Describe the issue
I added custom colors to the $theme-colors map, btn-, link- colors are generated perfectly but text- and bg- colors are not generated.
my main.scss file is as follows.
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/maps";
#import "../node_modules/bootstrap/scss/mixins";
#import "../node_modules/bootstrap/scss/utilities";
#import "../node_modules/bootstrap/scss/utilities/api";
//custom-API file
#import './abstract/api';
and code in _api.scss is as follows.
//custom-colors
$custom-theme-colors: (
"altdark": #314259,
'altsecondary' : #F579A0
);
$theme-colors : map-merge($theme-colors, $custom-theme-colors);
operating system(s)?
windows
Wversion of Bootstrap?
5.2.0-beta1
I'm trying to use #use instead of #import to import all the variables in my _custom.scss partial to styles.scss sass file. But #use is not overriding the variables as i intendent. How to solve?
_custom.scss
$primary: #ff00f2;
$secondary: #bb6ef5;
#import "../node_modules/bootstrap/scss/bootstrap";
styles.scss
#import 'custom';
Add all the variables inside the with by using the #use as shown below
_custom.scss
#use "../node_modules/bootstrap/scss/bootstrap.scss" with (
$primary: 'your color';
$secondary: 'your color';
);
styles.scss
#use 'custom'
I am creating a project using Reactjs as a frontend library and i am also using sass for styling .I have various sass files in my project .The two main files are styles.scss and color.scss.When i am trying to import color.scss in one of scss file i am facing this issue.I want to use color.scss in all my scss files
//style.scss
// vendors
#import "~bootstrap-scss/bootstrap.scss";
#import "vendors/font-awesome";
#import "vendors/themify";
#import "vendors/feather-icon";
#import "vendors/animate";
#import "vendors/owl.carousel.scss";
#import "vendors/slick.scss";
#import "vendors/slick-theme.scss";
#import "utils/helpers.scss";
//color
#import "./color.scss";
//base
#import "base/typography.scss";
#import "base/reset.scss";
// components
#import "components/buttons";
#import "components/tabs";
#import "components/msg";
#import "components/dropdown";
#import "components/chat-box";
#import "components/tootip";
#import "components/loader";
#import "components/switchery";
#import "components/collapse";
#import "components/call";
#import "components/call-list";
#import "components/according";
#import "components/tour";
//layout
#import "layout/grid.scss";
#import "layout/sidebar.scss";
#import "layout/content.scss";
#import "layout/dark.scss";
#import "layout/rtl.scss";
#import "layout/login";
#import "layout/forms.scss";
#import "layout/customizer.scss";
//pages
#import "pages/inner-pages";
#import "pages/landing";
#import "pages/inner-pages-responsive";
#import "pages/landing-responsive";
#import "pages/landing-page";
#import "pages/react_plugin";
// themes
#import "themes/admin.scss";
#import "themes/theme.scss";
#import "themes/responsive.scss";
// ReactToastify
#import "~react-toastify/dist/ReactToastify.css";
#import "~react-datepicker/dist/react-datepicker.css";
// ToolTip
#import "~react-tippy/dist/tippy.css";
// Image gallery
#import "~react-image-lightbox/style.css";
//color.scss
#import "utils/variables.scss";
#import "style";
#import "vendors/slick";
#import "vendors/slick-theme";
html {
&.style1 {
$primary-color :#3a62b8;
$primary-light: #f6f7fa;
$gray1 : #e4e7ef;
#import "style";
}
&.style2 {
$primary-color :#064c3c;
$primary-light: #f4faf9;
$gray1 : #e1f1ee;
#import "style";
}
&.style3 {
$primary-color :#9b4aff ;
$primary-light:#faf8fc;
$gray1: #f4effa;
#import "style";
}
&.style4 {
$primary-color :#00d3cb;
$primary-light:#ebfafa;
$gray1: #daf6f5;
#import "style";
}
&.style5 {
$primary-color :#ff5b92 ;
$primary-light:#f8f5f6;
$gray1 : #faebf0;
#import "style";
}
&.style6 {
$primary-color :#ff803c ;
$primary-light:#fff9f5;
$gray1 : #faeae0;
#import "style";
}
}
enter image description here
Well, I think the reason is really clear. Watch the second line of the color.scss. You can find that you are importing style.scss there. That might be the reason of the #import loop
I am working with Bootstrap v4.1.3
When trying to edit an element with class "card", I realized there are some codes like _card.scss and _type.scss adding style to my elements, and I don't even know how Bootstrap is calling them.
I would like to disable these codes so I don't have to rewrite the style.
Thanks in advance!
If you don't want these styles to be in your bootstrap file then you can download their source code at https://getbootstrap.com/docs/4.1/getting-started/download/#source-files
to exclude these two files from the bootstrap.scss & re-compile them.
/*!
* Bootstrap v4.1.3 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
#import "functions";
#import "variables";
#import "mixins";
#import "root";
#import "reboot";
#import "type";
#import "images";
#import "code";
#import "grid";
#import "tables";
#import "forms";
#import "buttons";
#import "transitions";
#import "dropdown";
#import "button-group";
#import "input-group";
#import "custom-forms";
#import "nav";
#import "navbar";
#import "card";
#import "breadcrumb";
#import "pagination";
#import "badge";
#import "jumbotron";
#import "alert";
#import "progress";
#import "media";
#import "list-group";
#import "close";
#import "modal";
#import "tooltip";
#import "popover";
#import "carousel";
#import "utilities";
#import "print";
I am working in Visual Studio Code. I am using Gulp / Node to compile my SASS.
Things are working well, but for some reason I can't override this in Bootstrap:
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
In my own _variable.scss I have the following:
$brand-primary: darken(#428bca, 6.5%)
$brand-success: #0aa699;
$brand-info: #1f3853;
$brand-warning: #fbb05e;
$brand-danger: #f35958;
$brand-grey: #d1dade;
And I am ensuring that all my custom .scss comes after the bootstrap stuff is loaded, yet them custom colours of mine aren't showing!
Here is the structure of the partials:
styles.scss
#import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
#import "custom/myappstyles";
myappstyles.scss
#import "modules/variables";
#import "modules/mixins";
#import "modules/layout";
#import "modules/typography";
#import "modules/forms";
#import "modules/buttons";
#import "modules/tables";
#import "modules/navigation-sidebar";
#import "modules/approval-sidebar";
Any ideas?
Could you write down your structure and imports?
UPDATE: Try to put variables before bootstrap import.