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.
Related
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
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
I'm using Bulma.io in an Angular 8 project and I've install Bulma with this command: npm install bulma. After that I've included the styles in my angular.json file:
"styles": [
"src/styles.css",
"node_modules/bulma/css/bulma.css"
],
"stylePreprocessorOptions": {
"includePaths":
"node_modules",
"node_modules/bulma/sass/utilities"
]
},
I can work with Bulma but I can't override the variables to change, for instance, the background color of a navbar.
Here's my scss file that overrides the background-color of a navbar:
#import 'horizontal-navbar.component.css';
#import 'initial-variables';
#import "functions";
#import "bulma";
$navbar-background-color: #fff;
What am I doing wrong?
Thanks in advance.
We can import this as we do it with node sass
First save the bulma package
npm install bulma --save
then go to the style.scss and give the below code
// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
// Update Bulma's global variables
$family-sans-serif: 'Nunito', sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
// Update some of Bulma's component variables
// $body-background-color: $beige-lighter;
$body-background-color: #fff;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
// Import only what you need from Bulma
#import '~node_modules/bulma/sass/utilities/_all';
#import '~node_modules/bulma/sass/base/_all';
#import '~node_modules/bulma/sass/elements/button';
#import '~node_modules/bulma/sass/elements/container';
#import '~node_modules/bulma/sass/elements/title';
#import '~node_modules/bulma/sass/form/_all';
#import '~node_modules/bulma/sass/components/navbar';
#import '~node_modules/bulma/sass/layout/hero';
#import '~node_modules/bulma/sass/layout/section';
I took this example from https://bulma.io/documentation/customize/with-node-sass/
I have Font Awesome v4.7.0 installed and I'm trying to write Sass classes that extend Font Awesome icon classes, like this:
div.edit-icon {
#extend .fa-pencil-square-o;
font-size: $icon-font-size;
}
At the start of one of my SCSS files (_shared.scss), I try importing the bare essentials I need from Font Awesome (installed in node_modules):
#import '~font-awesome/scss/variables';
#import '~font-awesome/scss/mixins';
#import '~font-awesome/scss/icons';
However, Webpack gives me this error when I save the file:
ERROR in ./~/sass-extract-loader!./app/views/components/_shared.scss
Module build failed: Error: File to import not found or unreadable: ~font-awesome/scss/variables.
Parent style sheet: C:/Users/<me>/WebstormProjects/<project>/app/views/components/_shared.scss
at options.error (C:\Users\<me>\WebstormProjects\<project>\node_modules\node-sass\lib\index.js:291:26)
# ./app/views/components/candb/MessageDefinitionView/CoreMessageDefinitionView.tsx 9:28-77
# ./app/views/components/candb/MessageDefinitionView/TxMessageDefinitionView.tsx
# ./app/views/components/candb/index.ts
# ./app/views/components/index.ts
# ./app/views/layouts/Page/Page.tsx
# ./app/routes.tsx
# ./app/index.tsx
# multi (webpack)-dev-server/client?http://localhost:1212 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:1212/ webpack/hot/only-dev-server ./app/index.tsx
Here's the start of node_modules\font-awesome\scss\_variables.scss:
// Variables
// --------------------------
$fa-font-path: "../fonts" !default;
$fa-font-size-base: 14px !default;
$fa-line-height-base: 1 !default;
//$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix: fa !default;
$fa-version: "4.7.0" !default;
$fa-border-color: #eee !default;
$fa-inverse: #fff !default;
$fa-li-width: (30em / 14) !default;
What I noticed is that the value of $fa-css-prefix is an unquoted string (fa), and that commenting out this assignment allows this SCSS file to compile.
How is it legal for this string to be unquoted, and what can I do to allow me to import this SCSS file?
For reference, this is a relevant part of my Webpack config for loading SCSS modules:
// Add SASS support - compile all other .scss files and pipe it to style.css
{
test: /^((?!\.global).)*\.scss$/,
loader: extractModuleCSS.extract({
fallback: 'style-loader',
use: [
'css-loader?modules&sourceMap&camelCase&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'sass-loader'
]
})
}
Edit
I thought that the fact that Webpack displayed an error about a different file when I commented out $fa-css-prefix: ... meant that at least _variables.scss was compiling fine:
Undefined variable: "$fa-css-prefix".
in C:\Users\<me>\WebstormProjects\<project>\node_modules\font-awesome\scss\_icons.scss (line 4, column 4)
Apparently that isn't the case, though. If I comment out the other imports in _shared like this:
#import '~font-awesome/scss/variables';
//#import '~font-awesome/scss/mixins';
//#import '~font-awesome/scss/icons';
Then I still see the original error ('File to import not found or unreadable: ~font-awesome/scss/variables.') regardless of the changes I make to _variables.scss - even commenting out the entire file.
I've updated the title to reflect this new information.
Edit 2
Based on #CloudTseng's advice I tried this:
$fa-css-prefix: 'fa';
#import '~font-awesome/scss/variables';
#import '~font-awesome/scss/core';
#import '~font-awesome/scss/icons';
$icon-font-size: 16px;
div.edit-icon {
#extend .fa;
#extend .fa-pencil-square-o;
font-size: $icon-font-size;
}
div.cross-icon {
#extend .fa;
#extend .fa-times;
font-size: $icon-font-size;
}
Surprisingly, this gives me exactly what I want. The reason I find this surprising is that apparently I only needed to redefine fa-css-prefix locally - I was expecting that I would have to redefine all the Font Awesome variables from _variables.scss if I went this route.
However, inspecting my generated CSS shows me that all the other variables are magically resolved without me needing to redefine them:
font-awesome/scss/_icons.scss:
.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
.#{$fa-css-prefix}-music:before { content: $fa-var-music; }
.#{$fa-css-prefix}-search:before { content: $fa-var-search; }
...
/dist/modules.css:
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.app-views-components-candb-FieldDefinitionTable-___FieldDefinitionTable__fa-glass___2rm6a:before {
content: "\F000"; }
.app-views-components-candb-FieldDefinitionTable-___FieldDefinitionTable__fa-music___3q-Vg:before {
content: "\F001"; }
.app-views-components-candb-FieldDefinitionTable-___FieldDefinitionTable__fa-search___f89bE:before {
content: "\F002"; }
...