Sass Deprecation in react bootstrap issue
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
â•·
13 │ @import "./core/vendors/plugins/plugins";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/plugins.scss 13:9 root stylesheet
tryed with sass migration but it didnt work.
Replies (4)
Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api
Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
â•·
6 │ @import "init";
│ ^^^^^^
╵
src/_metronic/assets/sass/style.scss 6:9 root stylesheet
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
â•·
9 │ @import "./core/components/components";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/style.scss 9:9 root stylesheet
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
â•·
10 │ @import "components/components";
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/style.scss 10:9 root stylesheet
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
â•·
13 │ @import "./core/layout/base/layout";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/style.scss 13:9 root stylesheet
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
â•·
14 │ @import "layout/layout";
│ ^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/style.scss 14:9 root stylesheet
Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
â•·
10 │ @import "init";
│ ^^^^^^
╵
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
â•·
13 │ @import "./core/vendors/plugins/plugins";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/plugins.scss 13:9 root stylesheet
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
â•·
7 │ @import "./core/base/functions";
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/_init.scss 7:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
â•·
8 │ @import "./core/base/mixins";
│ ^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/_init.scss 8:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
â•·
9 │ @import "./core/components/mixins";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/_init.scss 9:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.
More info and automated migrator: https://sass-lang.com/d/import
â•·
1223 │ $ribbon-label-border-color: darken($primary, 20%) !default;
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1223:29 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/style.scss 6:9 root stylesheet
Deprecation Warning: darken() is deprecated. Suggestions:
color.scale($color, $lightness: -36.170212766%)
color.adjust($color, $lightness: -20%)
More info: https://sass-lang.com/d/color-functions
â•·
1223 │ $ribbon-label-border-color: darken($primary, 20%) !default;
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1223:29 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/style.scss 6:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.
More info and automated migrator: https://sass-lang.com/d/import
â•·
1223 │ $ribbon-label-border-color: darken($primary, 20%) !default;
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1223:29 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: darken() is deprecated. Suggestions:
color.scale($color, $lightness: -36.170212766%)
color.adjust($color, $lightness: -20%)
More info: https://sass-lang.com/d/color-functions
â•·
1223 │ $ribbon-label-border-color: darken($primary, 20%) !default;
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1223:29 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.
More info and automated migrator: https://sass-lang.com/d/import
â•·
1244 │ active: darken(#3b5998, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1244:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/style.scss 6:9 root stylesheet
Deprecation Warning: darken() is deprecated. Suggestions:
color.scale($color, $lightness: -18.1279620853%)
color.adjust($color, $lightness: -7.5%)
More info: https://sass-lang.com/d/color-functions
â•·
1244 │ active: darken(#3b5998, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1244:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/style.scss 6:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.
More info and automated migrator: https://sass-lang.com/d/import
â•·
1244 │ active: darken(#3b5998, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1244:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: darken() is deprecated. Suggestions:
color.scale($color, $lightness: -18.1279620853%)
color.adjust($color, $lightness: -7.5%)
More info: https://sass-lang.com/d/color-functions
â•·
1244 │ active: darken(#3b5998, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1244:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.
More info and automated migrator: https://sass-lang.com/d/import
â•·
1250 │ active: darken(#dd4b39, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1250:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/style.scss 6:9 root stylesheet
Deprecation Warning: darken() is deprecated. Suggestions:
color.scale($color, $lightness: -13.7589928058%)
color.adjust($color, $lightness: -7.5%)
More info: https://sass-lang.com/d/color-functions
â•·
1250 │ active: darken(#dd4b39, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1250:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/style.scss 6:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.
More info and automated migrator: https://sass-lang.com/d/import
â•·
1250 │ active: darken(#dd4b39, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1250:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: darken() is deprecated. Suggestions:
color.scale($color, $lightness: -13.7589928058%)
color.adjust($color, $lightness: -7.5%)
More info: https://sass-lang.com/d/color-functions
â•·
1250 │ active: darken(#dd4b39, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1250:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.
More info and automated migrator: https://sass-lang.com/d/import
â•·
1256 │ active: darken(#1da1f2, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1256:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/style.scss 6:9 root stylesheet
Deprecation Warning: darken() is deprecated. Suggestions:
color.scale($color, $lightness: -14.1143911439%)
color.adjust($color, $lightness: -7.5%)
More info: https://sass-lang.com/d/color-functions
â•·
1256 │ active: darken(#1da1f2, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1256:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/style.scss 6:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.
More info and automated migrator: https://sass-lang.com/d/import
â•·
1256 │ active: darken(#1da1f2, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1256:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: darken() is deprecated. Suggestions:
color.scale($color, $lightness: -14.1143911439%)
color.adjust($color, $lightness: -7.5%)
More info: https://sass-lang.com/d/color-functions
â•·
1256 │ active: darken(#1da1f2, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1256:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.
More info and automated migrator: https://sass-lang.com/d/import
â•·
1262 │ active: darken(#e1306c, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1262:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/style.scss 6:9 root stylesheet
Deprecation Warning: darken() is deprecated. Suggestions:
color.scale($color, $lightness: -14.010989011%)
color.adjust($color, $lightness: -7.5%)
More info: https://sass-lang.com/d/color-functions
â•·
1262 │ active: darken(#e1306c, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1262:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/style.scss 6:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.
More info and automated migrator: https://sass-lang.com/d/import
â•·
1262 │ active: darken(#e1306c, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1262:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: darken() is deprecated. Suggestions:
color.scale($color, $lightness: -14.010989011%)
color.adjust($color, $lightness: -7.5%)
More info: https://sass-lang.com/d/color-functions
â•·
1262 │ active: darken(#e1306c, 7.5%)
│ ^^^^^^^^^^^^^^^^^^^^^
╵
src/_metronic/assets/sass/core/components/_variables.scss 1262:11 @import
src/_metronic/assets/sass/_init.scss 14:9 @import
src/_metronic/assets/sass/plugins.scss 10:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
â•·
53 │ ┌ i,
54 │ │ .svg-icon {
55 │ │ color: $icon-color-active;
56 │ │ }
│ └─── nested rule
... │
64 │ border-color: $border-color-active;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
src/_metronic/assets/sass/core/components/mixins/_buttons.scss 64:13 button-custom-variant()
src/_metronic/assets/sass/core/vendors/plugins/_daterangepicker.scss 107:13 @import
src/_metronic/assets/sass/core/vendors/plugins/_plugins.scss 11:9 @import
src/_metronic/assets/sass/plugins.scss 13:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
â•·
53 │ ┌ i,
54 │ │ .svg-icon {
55 │ │ color: $icon-color-active;
56 │ │ }
│ └─── nested rule
... │
68 │ background-color: $bg-color-active !important;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
src/_metronic/assets/sass/core/components/mixins/_buttons.scss 68:13 button-custom-variant()
src/_metronic/assets/sass/core/vendors/plugins/_daterangepicker.scss 107:13 @import
src/_metronic/assets/sass/core/vendors/plugins/_plugins.scss 11:9 @import
src/_metronic/assets/sass/plugins.scss 13:9 root stylesheet
Warning: 202 repetitive deprecation warnings omitted.
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> node_modules/bootstrap/scss/_reboot.scss
503 │ font-weight: $legend-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
node_modules/bootstrap/scss/_reboot.scss 503:3 @import
node_modules/bootstrap/scss/bootstrap.scss 16:9 @import
src/_metronic/assets/sass/core/components/components.scss 9:9 @import
src/_metronic/assets/sass/style.scss 9:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> node_modules/bootstrap/scss/_reboot.scss
504 │ line-height: inherit;
│ ^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
node_modules/bootstrap/scss/_reboot.scss 504:3 @import
node_modules/bootstrap/scss/bootstrap.scss 16:9 @import
src/_metronic/assets/sass/core/components/components.scss 9:9 @import
src/_metronic/assets/sass/style.scss 9:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> node_modules/bootstrap/scss/_type.scss
38 │ font-family: $display-font-family;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
node_modules/bootstrap/scss/_type.scss 38:5 @import
node_modules/bootstrap/scss/bootstrap.scss 17:9 @import
src/_metronic/assets/sass/core/components/components.scss 9:9 @import
src/_metronic/assets/sass/style.scss 9:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> node_modules/bootstrap/scss/_type.scss
39 │ font-style: $display-font-style;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
node_modules/bootstrap/scss/_type.scss 39:5 @import
node_modules/bootstrap/scss/bootstrap.scss 17:9 @import
src/_metronic/assets/sass/core/components/components.scss 9:9 @import
src/_metronic/assets/sass/style.scss 9:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
┌──> node_modules/bootstrap/scss/_type.scss
40 │ font-weight: $display-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
node_modules/bootstrap/scss/_type.scss 40:5 @import
node_modules/bootstrap/scss/bootstrap.scss 17:9 @import
src/_metronic/assets/sass/core/components/components.scss 9:9 @import
src/_metronic/assets/sass/style.scss 9:9 root stylesheet
Warning: 581 repetitive deprecation warnings omitted.
Hi,
Thank you for reporting this error.
Are you using the latest Metronic version?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
This is old version metronic_react_v8.2.5_demo1 this is vite when i upadate dependencies only facing this. problem was with sass
Hi,
Have you updated the SCSS files to the latest version?
If not, please copy the assets from the latest version of Metronic and paste them into your project.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
