Level 80
@rubenochoa !important is a CSS declaration.
Jul 25, 2021
63
Level 2
Question about !important; color
First time I have installed Laravel Mix and at latest version of Laravel following the document.
npm run watch run successfully but when at app.scss file using only !important the backround color change.
Why this happen?
app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import "~bootstrap/scss/functions";
// Variables
@import 'variables';
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
// Bootstrap
@import '~bootstrap/scss/bootstrap';
_variables.scss
$primary-color:#ff0000;
body{
background-color: $primary-color;
}
webpack.mix.js.
const mix = require('laravel-mix');
mix.disableNotifications();
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.react()
.sass('resources/sass/app.scss', 'public/css',);
Level 2
@martinbean I mean without !important the color do not change.
Level 29
Check your css/scss declared.
Probably there is somewhere else that has declared body background colour using !important tag.
Maybe that is the reason that you need to use !important to apply the css.
Level 2
@frankielee I do not think so. I have updated the post.
Level 29
I think is due to the ordering issue
the "~bootstrap/scss/variables"; is overriding the body background
@import 'variables';
@import "~bootstrap/scss/variables";
Check the file node_modules/bootstrap/scss/_variables.css
The body background by default is white
$body-bg: $white !default;
btw, since you are using bootstrap variables, you probably just need to change the $body-bg value
$body-bg: #ff0000;
1 like
Level 2
@frankielee You mean that if I delete @import "~bootstrap/scss/variables"; then it will use my variables(@import 'variables';) and the color will change, right?
Level 29
no, check my latest comment.
This import of '~bootstrap/scss/bootstrap'; will import "~bootstrap/scss/variables" as well.
But if you change the value of $body-bg, yes the body background will be overridden.
But if you stick with your own declaration. Make sure you import the variables.scss is after the bootstrap.scss
For my case:
_variables.csss
$body-bg: black;
app.scss
@import '_variables';
@import '~bootstrap/scss/bootstrap';
Level 2
I try your method, @frankielee :
variables.scss
// Body
$body-bg: black;
body{
background-color: $body-bg;
}
app.scss
@import 'variables';
@import '~bootstrap/scss/bootstrap';
and i see no changing. Did i make something wrong? Did i did not understand something?
Level 29
Try the following steps:
- open developer tools F12, check if the CSS declared shows in the elements tab.
- clear the caches: php artisan optimize:clear
Level 2
No, it is white @frankielee and i run the optimize but nothing.
Level 29
There is no strikethrough declaration?
Check the bootstrap.scss, does it import others scss files?
Check the node modules variables.scss files Is there any declaration like this?
// Body
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-900 !default;
$body-text-align: null !default;
Level 2
@frankielee bootstrap.scss
/*!
* Bootstrap v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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 "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";
variables.scss
/ Body
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-900 !default;
<link rel="stylesheet" href="{{asset('/css/app.css')}}">
Level 29
I see we are using different version. I am using v5.0.2 while you are using v4.6.0
Can you try this?
https://getbootstrap.com/docs/4.6/getting-started/theming/#variable-defaults
https://getbootstrap.com/docs/4.6/getting-started/theming/#modify-map
Level 2
@frankielee already tryed that and run dev says: Can't find stylesheet to import @import "../node_modules/bootstrap/scss/functions"; when i put this at app.scss:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Level 29
Can you let me know which version of Laravel you are using?
Do you use laravel/ui or any package to initialize the UI?
change ../node_modules/ to ~
Level 2
@frankielee laravel 8 and composer require laravel/ui says that there is nothing to remove or update. and i did this:
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
and still the same....I am running out of ideas...
Level 29
@rubenochoa I think there are some issues you faced during the build progress. You need to fix those issues first.
- Delete package-lock.json
- package.json Change
"sass": "^1.32.11"
To
"sass": "1.32.13"
-
delete node_modules
-
Edit the following files _variables.scss
// Body
$body-bg: black;
// Typography
$font-family-sans-serif: "Nunito", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
- Run npm install and npm run dev
Level 2
@frankielee Before check your answer the next day(today) I checked the element style from the inspect again and I see that if I uncheck the background-color then the color that i have choose is changing the background color.
Level 29
@rubenochoa Check the :root from the styles, you should see something like below, try to change the variable $blue to others colour(in variables.scss), the changes should reflect on the --bs-blue
:root{
--bs-blue: #3490dc;
--bs-indigo: #6574cd;
--bs-purple: #9561e2;
--bs-pink: #f66d9b;
--bs-red: red;
--bs-orange: #f6993f;
--bs-yellow: #ffed4a;
--bs-green: #38c172;
--bs-teal: #4dc0b5;
--bs-cyan: #6cb2eb;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-primary: #3490dc;
--bs-secondary: #6c757d;
--bs-success: #38c172;
--bs-info: #6cb2eb;
--bs-warning: #ffed4a;
--bs-danger: red;
--bs-light: #f8f9fa;
--bs-dark: #212529;
}
Level 2
@frankielee I set $blue: #111213; to variables and the color at root is still blue.
Level 29
@rubenochoa I tried the package laravel/ui here, there are some warnings shown in the terminal.
So there is no warning message at all?
Level 2
@frankielee npm run dev results:
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ building (10%) 0/2 entries 60/69 dependencies 19/31 modules 12 active
node_modules\axios\lib\core\Axios.js
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ building (37%) 1/2 entries 67/69 dependencies 20/37 modules 15 active
node_modules\axios\lib\adapters\xhr.js
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ building (37%) 1/2 entries 79/80 dependencies 29/39 modules 10 active
node_modules\axios\lib\core\transformData.js
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ building (37%) 1/2 entries 88/93 dependencies 33/41 modules 8 active
node_modules\axios\lib\helpers\cookies.js
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ building (37%) 1/2 entries 102/102 dependencies 36/47 modules 11 active
node_modules\axios\lib\core\enhanceError.js
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ building (37%) 1/2 entries 107/108 dependencies 38/48 modules 10 active
node_modules\axios\lib\core\enhanceError.js
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ sealing (70%)
finish module graph
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ sealing (86%) record chunks
RecordIdsPlugin
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ sealing (88%)
runtime requirements
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ sealing (92%)
asset processing
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ emitting (95%)
emit
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
* Mix █████████████████████████ emitting (98%)
after emit
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
718 │ $navbar-padding-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 718:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: 64 repetitive deprecation warnings omitted.
* Mix █████████████████████████ done (99%) plugins
WebpackBar:done
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
718 │ $navbar-padding-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 718:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: 64 repetitive deprecation warnings omitted.
√ Mix
Compiled successfully in 24.21s
(node:5344) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:5344) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
302 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 302:31 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
498 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 498:73 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
568 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 568:49 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
713 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 713:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
718 │ $navbar-padding-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 718:37 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
resources\sass\app.scss 7:9 root stylesheet
: 64 repetitive deprecation warnings omitted.
Laravel Mix v6.0.25
✔ Compiled Successfully in 23737ms
┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐│ File │ Size │├──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤│ /js/app.js │ 2.08 MiB ││ css/app.css │ 178 KiB │└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
* Mix █████████████████████████ done (99%)
plugins
webpack compiled successfully
Level 29
@rubenochoa yeah, that is the reason why variables' value don't work. Please follow the steps I listed or the answer in the stack overflow link I posted.
That will solve this issue
Level 2
After that @frankielee
npm run dev
Active code page: 1252
> dev
> npm run development
> development
> mix
* Mix █████████████████████████ building (10%) 0/2 entries 7/12 dependencies 0/7 modules 5 active
* Mix █████████████████████████ building (10%) 0/2 entries 10/12 dependencies 0/9 modules 9 active
* Mix █████████████████████████ building (10%) 0/2 entries 12/15 dependencies 0/12 modules 11 active
* Mix █████████████████████████ building (10%) 0/2 entries 17/21 dependencies 2/14 modules 11 active
* Mix █████████████████████████ building (10%) 0/2 entries 22/26 dependencies 4/15 modules 11 active
* Mix █████████████████████████ building (10%) 0/2 entries 28/41 dependencies 4/18 modules 13 active
* Mix █████████████████████████ building (10%) 0/2 entries 53/64 dependencies 11/28 modules 15 active
* Mix █████████████████████████ building (10%) 0/2 entries 81/89 dependencies 23/36 modules 13 active
* Mix █████████████████████████ building (10%) 0/2 entries 106/106 dependencies 35/47 modules 12 active
* Mix █████████████████████████ building (37%) 1/2 entries 110/110 dependencies 46/49 modules 2 active
* Mix █████████████████████████ sealing (89%)
* Mix █████████████████████████ emitting (95%)
* Mix █████████████████████████ emitting (98%)
after emit
(node:9572) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:9572) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: math.div() will only support number arguments in a future release.
Use list.slash() instead for a slash separator.
╷
120 │ background: $custom-select-background, $custom-select-bg escape-svg($icon) math.div($custom-select-feedback-icon-position, $custom-select-feedback-icon-size) no-repeat;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\mixins\_forms.scss 120:84 @content
node_modules\bootstrap\scss\mixins\_forms.scss 37:7 form-validation-state-selector()
node_modules\bootstrap\scss\mixins\_forms.scss 115:5 form-validation-state()
node_modules\bootstrap\scss\_forms.scss 263:3 @import
node_modules\bootstrap\scss\bootstrap.scss 18:9 @import
resources\sass\app.scss 7:9 root stylesheet
* Mix █████████████████████████ done (99%) plugins
WebpackBar:done
(node:9572) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:9572) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: math.div() will only support number arguments in a future release.
Use list.slash() instead for a slash separator.
╷
120 │ background: $custom-select-background, $custom-select-bg escape-svg($icon) math.div($custom-select-feedback-icon-position, $custom-select-feedback-icon-size) no-repeat;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\mixins\_forms.scss 120:84 @content
node_modules\bootstrap\scss\mixins\_forms.scss 37:7 form-validation-state-selector()
node_modules\bootstrap\scss\mixins\_forms.scss 115:5 form-validation-state()
node_modules\bootstrap\scss\_forms.scss 263:3 @import
node_modules\bootstrap\scss\bootstrap.scss 18:9 @import
resources\sass\app.scss 7:9 root stylesheet
√ Mix
Compiled successfully in 8.57s
(node:9572) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:9572) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
: math.div() will only support number arguments in a future release.
Use list.slash() instead for a slash separator.
╷
120 │ background: $custom-select-background, $custom-select-bg escape-svg($icon) math.div($custom-select-feedback-icon-position, $custom-select-feedback-icon-size) no-repeat;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\mixins\_forms.scss 120:84 @content
node_modules\bootstrap\scss\mixins\_forms.scss 37:7 form-validation-state-selector()
node_modules\bootstrap\scss\mixins\_forms.scss 115:5 form-validation-state()
node_modules\bootstrap\scss\_forms.scss 263:3 @import
node_modules\bootstrap\scss\bootstrap.scss 18:9 @import
resources\sass\app.scss 7:9 root stylesheet
Laravel Mix v6.0.25
✔ Compiled Successfully in 8363ms
┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐│ File │ Size │├──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤│ /js/app.js │ 2.08 MiB ││ css/app.css │ 178 KiB │└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
* Mix █████████████████████████ done (99%)
plugins
webpack compiled successfully
Level 29
@rubenochoa, you are following these steps, right? Did you stop npm run dev atm you configuring thing?
As I mentioned, after doing the following steps. The warnings will be gone, everything will work properly.
- Delete package-lock.json
- package.json Change
Level 2
@frankielee. Exacly. Do I have to do it again? Thank you very much for your time.
Level 29
Can you show your package.json and composer.json? @rubenochoa
also, what is the node version is using?
Level 2
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@babel/preset-react": "^7.13.13",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0",
"@popperjs/core": "^2.9.2",
"@tailwindcss/ui": "^0.3",
"autoprefixer": "^9.6",
"axios": "^0.21",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.25",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"postcss-import": "^12.0",
"postcss-nested": "^4.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-refresh": "^0.10.0",
"resolve-url-loader": "^4.0.0",
"sass": "^1.32.13",
"sass-loader": "^11.0.1",
"tailwindcss": "^2.2.7"
},
"dependencies": {
"uuid": "^3.4.0"
}
}
Level 29
Is "sass": "1.32.13" not "sass": "^1.32.13",
Level 2
So i had to delete and config again with the correct version: ^1.32.13? @frankielee
Level 29
Yes and the version is without ^, please read carefully.
Change to this
"sass": "1.32.13"
"sass": "1.32.13"
"sass": "1.32.13"
"sass": "1.32.13"
"sass": "1.32.13"
Level 2
@frankielee after did that again:
npm run dev
Active code page: 1252
> dev
> npm run development
> development
> mix
* Mix █████████████████████████ emitting (98%) after emit
SizeLimitsPlugin
(node:1936) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:1936) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
* Mix █████████████████████████ done (99%) plugins
WebpackBar:done
(node:1936) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:1936) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
√ Mix
Compiled successfully in 13.58s
(node:1936) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:1936) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
Laravel Mix v6.0.27
✔ Compiled Successfully in 13316ms
┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐│ File │ Size │├──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤│ /js/app.js │ 2.08 MiB ││ css/app.css │ 178 KiB │└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘webpack compiled successfully
Level 29
@rubenochoa Can you show your package.json again? The warning messages still exist.
Or try my Github Project
I have fixed the issue, try
- composer install
- npm install
- npm run hot
- if there are no warning/error messages shows, change the value of $body-bg
- if there is no issue, compare both "package.json" files
Level 2
npm run dev
Active code page: 1252
> dev
> npm run development
> development
> mix
* Mix █████████████████████████ emitting (98%)
after emit
(node:3760) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:3760) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
* Mix █████████████████████████ done (99%) plugins
WebpackBar:done
(node:3760) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:3760) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
√ Mix
Compiled successfully in 18.15s
(node:3760) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:3760) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
Laravel Mix v6.0.27
✔ Compiled Successfully in 17815ms
┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐│ File │ Size │├──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤│ /js/app.js │ 2.08 MiB ││ css/app.css │ 178 KiB │└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘webpack compiled successfully
and about browzer errors: Unchecked runtime.lastError: The message port closed before a response was received. localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.
Level 29
Where do you develop the project? what are your Nodejs and npm versions?
nodejs: v14.17.0 npm: 6.14.13 platform: window and Linux ubuntu
btw, are you using my project?
Level 2
@frankielee
Windows: 10
Php: 7.4.1
nodejs: v14.17.3
npm: 7.20.0
Browzer: Chrome
errors at Chrome: Unchecked runtime.lastError: The message port closed before a response was received.
Microsoft Visual Studio(latest update)
Everything is updated.
I checked if your file is exacly like me and it is true about package.json and there is no error anymore and the project is brand new.
npm run dev
Active code page: 1252
> dev
> npm run development
> development
> mix
* Mix █████████████████████████ emitting (98%)
after emit
* Mix █████████████████████████ done (99%) plugins
WebpackBar:done
√ Mix
Compiled successfully in 19.38s
Laravel Mix v6.0.27
✔ Compiled Successfully in 18813ms
┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐│ File │ Size │├──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤│ /js/app.js │ 2.08 MiB ││ css/app.css │ 178 KiB │└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘webpack compiled successfully
Level 29
@rubenochoa have you tried to change the $body-bg? the background should change in real-time.
or just time npm run dev every time after changing the value.
Level 2
of course @frankielee
Level 29
of course means working or ? @rubenochoa
Level 2
@frankielee not at all. I am wondering if the link is corect that I am using at app: <link href="/css/app.css" rel="stylesheet">
Level 29
i don't think so @rubenochoa The project totally works fine for me.
Level 2
@frankielee Then something strange happens. I will try again everything and if that works then I will let you know. Thank you very much for your time.
Level 29
@rubenochoa my bad, I forgot to push the authentication blade files. If you were browsing the welcome page, the background colour wouldn't change.
Try again the following steps 1, composer install 2. npm install 3. npm run watch 4. if there are no warning/error messages shows, change the value of $body-bg. Browse register or login blade 5. if there is no issue, compare both "package.json" files
Level 2
@frankielee I downloaded your project and loaded to the VSC but error 500 appears and at mine not.
Level 29
500 error is PHP error, please check the error log file
Level 2
@frankielee Succeed to load your project but still the same issue even with your project. I will create a new one to see if something change and I will let you know.
Level 29
@rubenochoa You should be able to see something like this after changing the colour.
Level 2
@frankielee i saw red first and then when i changed into blue nothing happens.
Level 29
red means it is working. By default, it should be white.
Which command did you run for the development?
- npm run watch
- npm run hot
- npm run dev
Don't disable the notification also.
Level 2
@frankielee 3 without disable notification
Level 29
did you rerun the command after changing the colour?
try to use npm run watch
Level 2
Cause i do not know how to show my screenshot: https://ibb.co/2PXBLdh @frankielee
Level 29
@rubenochoa did you try to clear the browser cache? Can you show the messages from the terminal?
mine is 
Level 29
Btw, you only need to import one file for bootstrap
@import '~bootstrap/scss/bootstrap';
This file has imported other scss files.
/*!
* Bootstrap v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
// scss-docs-end import-stack
Level 2
@frankielee That is mean that when i need to change color i have to edit the $white: #fff !default; at vaiables file and not the file _variables?
Level 29
@rubenochoa no, for the blade file included the app.blade.php as header.
you only need to change the $body-bg value in resources/sass/_variables.scss
// Body
$body-bg: #3490dc;
Level 2
It changed from white to red for a moment but with watch not change in real time neither off-time @frankielee
Level 29
It changed from white to red for a moment
What do you mean? It will become white after 5 seconds?
but with watch not change in real-time neither off-time
Did you refresh the page?
Level 2
@frankielee When I changed the import it changed but now when I am changing colors does not effect at all. Yes, many time resfresh the page.
Updated:
I misunderstood that at app.scss i need:
@import 'variables';
@import '~bootstrap/scss/bootstrap';
and not only the second line.
Thank you so much for your time...Thank you.
Level 29
@rubenochoa You should inform us of the changes done, all the warning messages shown, That will save a lot of time.
Level 2
@frankielee There was no warning messages. I import:
@import 'variables';
@import '~bootstrap/scss/bootstrap';
at app.scss only. Back to my project is the only issue now.
Level 29
There was no warning messages.
Before changing to "sass": "1.32.13", there is no error message shown?
Maybe I should update my npm version.
Level 2
Before delete the nodes and before sass version yes @frankielee . I think if someone have similar issue or same can see the history of messages.
Please or to participate in this conversation.