Question 160856 in Laravel Question posted in
The official Laravel Documentation can be found here.

“Does Laravel not replace Bootstrap CSS variables?”

I am developing some custom styles in Laravel and overriding the default bootstrap color variables.

This is inside my app.scss

@import '~bootstrap/scss/bootstrap';
@import "node_modules/font-awesome/scss/font-awesome.scss";

$primary: #625BF6;
$danger: #ff4136;

.btn-primary {
    --bs-btn-bg: $primary;
    --bs-btn-hover-bg: #6b64f5;
    --bs-btn-active-bg: #534bf3;
}

I have also made the changes in webpack.mix.js to use sass as the compiler

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/css/app.scss', 'public/css');

However, even after running npm watch or npm run dev, the variable $primary is not being substituted.

enter image description here

Why would this happen?

EDIT: I don’t think its about bootstrap anymore or the order of variable. The variable is simply not being substituted.

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    The sass value is getting replaced for a regular property but not for css variables

    $primary:   #625BF6;
$danger:    #ff4136;

@import '~bootstrap/scss/bootstrap';

.btn-primary {
    background-color:$primary;
    --bs-btn-bg: $primary;
    --bs-btn-hover-bg: #6b64f5;
    --bs-btn-active-bg: #534bf3;
}

    enter image description here

    So, it looks like sass does not support css variables being set from sass variables.


  2. 0

    Maybe this may help you

     npm run watch-poll

    ref : https://laravel.com/docs/8.x/mix#watching-assets-for-changes

    Login or Signup to reply.
  3. 0

    Try to define the variable and then import it.

    // Define variables
$primary: #625BF6;
$danger: #ff4136;

// Import styles
@import '~bootstrap/scss/bootstrap';
@import "node_modules/font-awesome/scss/font-awesome.scss";

.btn-primary {
    --bs-btn-bg: $primary;
    --bs-btn-hover-bg: #6b64f5;
    --bs-btn-active-bg: #534bf3;
}

    Then npm watch or npm run dev

    Login or Signup to reply.
  4. 0

    This is a breaking change in a recent SCSS version. The reason is $primary is actually a valid value for a CSS variable so it is no longer automatically replaced (in case that’s what you wanted to input). To get the actual SCSS variable to be used you need to use interpolation:

    @import '~bootstrap/scss/bootstrap';
@import "node_modules/font-awesome/scss/font-awesome.scss";

$primary: #625BF6;
$danger: #ff4136;

.btn-primary {
    --bs-btn-bg: #{$primary};
    --bs-btn-hover-bg: #6b64f5;
    --bs-btn-active-bg: #534bf3;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search