i don't know should i place bootstrap.rtl.min.css before or after app.scss theming in reactjs
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/maps";
#import "../node_modules/bootstrap/scss/utilities";
$font-sizes: (
1: 12px,
2: 14px,
3: 16px,
4: 18px,
5: 20px,
6: 22px,
7: 24px,
8: 26,
);
$utilities: map-merge(
$utilities,
(
"font-size":
map-merge(
map-get($utilities, "font-size"),
(
values: $font-sizes,
)
),
"rounded": (
property: border-radius,
class: rounded,
values: (
null: 4px,
0: 0,
"sm": 3px,
"md": 8px,
circle: 50%,
),
),
)
);
#import "../node_modules/bootstrap/scss/bootstrap";
placing it after app.scss rtl override and in before ltr version override because it's called in app.scss
Related
I'm trying to add some color variables such as "blue", "indigo" ... to $theme-colors map it's work but after compiling it shows duplicated in :root selector like the image below.
Here is the result:
Image
this is my _variables.scss file:
// Import functions
#import "../../../node_modules/bootstrap/scss/functions";
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: #c55e0a;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
$custom-theme-colors: (
"blue": $blue,
"indigo": $blue,
"purple": $blue,
"pink": $blue,
"yellow": $blue,
"teal": $teal
);
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
// Import required Bootstrap stylesheets
#import "../../../node_modules/bootstrap/scss/variables";
#import "../../../node_modules/bootstrap/scss/mixins";
#import "../../../node_modules/bootstrap/scss/utilities";
#import "../../../node_modules/bootstrap/scss/bootstrap";
How I can fix this?
As you can read in the Bootstrap docs, customizations should be kept in a separate file. Therefore, you shouldn't modify _variables.scss but instead create seperate file with your custom colors.
The custom file portion would look like this
ex: custom.scss
#import "bootstrap/functions";
#import "bootstrap/variables";
$custom-colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"yellow": $yellow,
"teal": $teal
);
$theme-colors: map-merge($theme-colors, $custom-colors);
#import "bootstrap";
Also, it's expected that the :root variables would appear twice since you're merging them with the theme-colors map. Take a look at how the :root gets built in _root.scss...
First the $colors map is iterated.. then the $theme-colors map is iterated so it would make perfect since you're seeing --bs-blue, --bs-indigo, etc... twice in the :root...
#each $color, $value in $colors {
--#{$variable-prefix}#{$color}: #{$value};
}
....
#each $color, $value in $theme-colors {
--#{$variable-prefix}#{$color}: #{$value};
}
There is nothing to fix, it's working as expected. Maybe if you can describe what you're trying to achieve instead of describing a symptom there would be a different answer or better solution.
So i'm using vue js and scss.
I'm using PrimeVue and Element plus, and i'm importing there variables.
I would like to change dynamically the theme color.
dark-variables.scss
$--color-primary: #c9d1d9 !default;
/// color|1|Background Color|4
$--color-white: #11141a !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: #21262d !default; /* ecf5ff */ // #2c333c | #152344
/// color|1|Functional Color|1
$--color-success: #67c23a !default;
/// color|1|Functional Color|1
$--color-warning: #e6a23c !default;
/// color|1|Functional Color|1
$--color-danger: #f56c6c !default;
/// color|1|Functional Color|1
$--color-info: #909399 !default;
$--color-primary - Can be used in a lot of scss files, and i would like to change the color depends on the theme,
for example:
$--color-primary: white (if light theme and if black theme then it would be black)
** What i'm trying to do**
$themes: (
darkTheme: (
"text-color": rgb(245, 0, 0),
"bg-color": #424242,
),
lightTheme: (
"text-color": black,
"bg-color": #f5f5f5,
),
);
#mixin theme() {
#each $theme, $map in $themes {
$theme-map: $map !global;
.#{$theme} & {
}
}
$theme-map: null !global;
}
#function theme-get($key) {
#return map-get($theme-map, $key);
}
// - Error
$--color-primary: theme-get("text-color");
The error it self:
Syntax Error: SassError: Undefined variable.
╷
56 │ #return map-get($theme-map, $key);
│ ^^^^^^^^^^
╵
src\assets\styles\element-variables.scss 56:19 theme-get()
src\assets\styles\element-variables.scss 59:19 #import
src\assets\styles\kendoUI\kendoUI.scss 1:9 #import
E:\Sproj\Web\src\assets\styles\styles.scss 7:9
How can make it work?
I think there are two things we need to change,
We need to remove the incorrect syntax of dynamic class with &
We need to include the mixin to initialise $theme-map
darkTheme: (
"color": rgb(245, 0, 0),
"background-color": #424242,
),
lightTheme: (
"color": black,
"background-color": #f5f5f5,
),
);
#mixin theme() {
$theme-map: null !global;
#each $theme, $map in $themes {
$theme-map: $map !global;
.#{$theme} {
}
}
}
#include theme();
#function theme-get($key) {
#return map-get($theme-map, $key);
}
// - Error
$--color-primary: theme-get("text-color");
.theme {
color: $--color-primary;
}
i am using bootstrap v5 using npm and using sass compiler to compile the scss. i want to customize .btn-primary .so in my dirctory _button.sccs file i made a .btn-primary class with icluding the button-variant mixin given from bootstrap.
but at compiling time it gives an error.
The code is below :
This is my _custom.scss file.
$yellow: #f8b534;
$small: 576px;
$medium: 768px;
$large: 992px;
//bootstrap imported
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
#import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Copy
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
#import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
#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";
Then my _button.scss file:
#use '../custom' as *;
$btn-padding-y: $input-btn-padding-y;
$btn-padding-x: $input-btn-padding-x;
$btn-font-family: $input-btn-font-family;
$btn-font-size: $input-btn-font-size;
$btn-line-height: $input-btn-line-height;
$btn-white-space: null; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm;
$btn-padding-x-sm: $input-btn-padding-x-sm;
$btn-font-size-sm: $input-btn-font-size-sm;
$btn-padding-y-lg: $input-btn-padding-y-lg;
$btn-padding-x-lg: $input-btn-padding-x-lg;
$btn-font-size-lg: $input-btn-font-size-lg;
$btn-border-width: $input-btn-border-width;
$btn-font-weight: $font-weight-normal;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width: $input-btn-focus-width;
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
$btn-disabled-opacity: .65;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
$btn-link-color: $link-color;
$btn-link-hover-color: $link-hover-color;
$btn-link-disabled-color: $gray-600;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius;
$btn-border-radius-sm: $border-radius-sm;
$btn-border-radius-lg: $border-radius-lg;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$btn-hover-bg-shade-amount: 15%;
$btn-hover-bg-tint-amount: 15%;
$btn-hover-border-shade-amount: 20%;
$btn-hover-border-tint-amount: 10%;
$btn-active-bg-shade-amount: 20%;
$btn-active-bg-tint-amount: 20%;
$btn-active-border-shade-amount: 25%;
$btn-active-border-tint-amount: 10%;
.btn-primary {
#include button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background:
if(
$color == $color-contrast-light,
shade-color($background, $btn-hover-bg-shade-amount),
tint-color($background, $btn-hover-bg-tint-amount)
),
$hover-border:
if(
$color == $color-contrast-light,
shade-color($border, $btn-hover-border-shade-amount),
tint-color($border, $btn-hover-border-tint-amount)
),
$hover-color: color-contrast($hover-background),
$active-background:
if(
$color == $color-contrast-light,
shade-color($background, $btn-active-bg-shade-amount),
tint-color($background, $btn-active-bg-tint-amount)
),
$active-border:
if(
$color == $color-contrast-light,
shade-color($border, $btn-active-border-shade-amount),
tint-color($border, $btn-active-border-tint-amount)
),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
)
};
But when compiling gives this error in below:
Error: Undefined variable.
╷
49 │ $background,
│ ^^^^^^^^^^^
╵
scss\components\_button.scss 49:3 #use
scss\sections\_navbar.scss 2:1 #use
scss\style.scss 6:1 root stylesheet
I have a scss file with my color scheme
_colors.scss
#import './variables';
$colors: (
p: $color-primary,
s: $color-secondary,
t: $color-tertiary,
q: $color-quartary,
);
#each $name, $hsl in $colors {
.c-#{name} {
color: $hsl;
}
.bg-#{name} {
background: $hsl;
}
}
And file with variables
_variables.scss
$color-primary: hsl(113, 99%, 53%);
$color-secondary: hsl(0, 7%, 19%);
$color-tertiary: hsl(0, 7%, 78%);
$color-quartary: hsl(2, 87%, 48%);
And finally
main.scss
#import './variables';
#import './colors';
body {
color: $color-tertiary;
background-color: $color-secondary;
}
So the question is why I can't use the classes generated in #each which should be c-p, bg-p, c-s, etc.
If I manually define for example c-p class
.c-p {
color: $color-primary;
}
It doesn't matter where I define it in _colors.scss or main.scss and either it before or after #each statement. It works just fine.
Your loop currently generates CSS classes like .bg-name and .c-name as you're using the string name instead of the variable $name. The following should work:
#each $name, $hsl in $colors {
.c-#{$name} {
color: $hsl;
}
.bg-#{$name} {
background: $hsl;
}
}
I finally decided to create a post as I'm searching since more than one week where my error.
I'm moving my ionic3 project to ionic6. And I have a Sass error occuring :
ERROR in ./src/theme/common.scss
(./node_modules/css-loader/dist/cjs.js
??ref--13-1!./node_modules/postcss-loader/src
??embedded!./node_modules/sass-loader/dist/cjs.js
??ref--13-3!./src/theme/common.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (primary: #387ef5, secondary: #ae75e7, danger: #f4344f, light: #f4f4f4,
dark: #222, favorite: #ffaab6, walkthrough: (base: #132d59, contrast: #FFFFFF),
walkthrough-alt: (base: #ae75e7, contrast: #FFFFFF), walkthrough-header: (base: transparent, contrast: #FFFFFF),
header: (base: #132d59, contrast: #FFFFFF), header-alt: (base: #ae75e7, contrast: #FFFFFF),
button: (base: #132d59, contrast: #FFFFFF), button-alt: (base: #ae75e7, contrast: #FFFFFF),
background: (base: #e0e0e0, contrast: rgba(51, 51, 51, 0.8)), tabs-navigation: (base: #FFFFFF,
contrast: #c2c2c2)) isn't a valid CSS value.
╷
5 │ background-color: color($colors, background, base);
│ ^^^^^^^
╵
src/theme/common/side-menu.scss 5:27
Here the line the side-menu.scss
.menu-content
{
background-color: color($colors, background, base);
}
Here is the $colors variable
$colors: (
primary: #387ef5,
secondary: #ae75e7,
danger: #f4344f,
light: #f4f4f4,
dark: #222,
favorite: rgb(255, 170, 182),
walkthrough:( base: $theme-color-1, contrast: $white ),
walkthrough-alt:( base: $theme-color-2, contrast: $white ),
walkthrough-header:(base: transparent, contrast: $white ),
header:( base: $theme-color-1, contrast: $white ),
header-alt:( base: $theme-color-2, contrast: $white ),
button:( base: $theme-color-1, contrast: $white ),
button-alt:( base: $theme-color-2, contrast: $white ),
background:( base: $white-c, contrast: $black-b ),
tabs-navigation:( base: $white, contrast: $white-d )
);
Here is the color function
#function color($map, $color-name: 'background', $color-key: null) {
$color-value: map-get($map, $color-name);
// If we were given a map we need to grab the value
// of the key that is passed or the base key
#if(type-of($color-value) == "map") {
#if($color-key) {
$color-value: map-fetch($map, $color-name, $color-key);
} #else {
$color-value: map-fetch($map, $color-name, base);
}
}
#if (type-of($color-value) == color) {
#return $color-value;
}
#return color-error($color-value, $color-name);
}
#function map-fetch($map, $keys...) {
#each $key in $keys {
$map: map-get($map, $key);
}
#return $map;
}
Please help me out find my error
Try as following:
theme folder:
:root {
/** primary **/
--ion-color-primary: #3880ff;
}
Then your CSS:
background-color: var(--ion-color-primary);
Goodluck!