Beginner Q: Overwriting/changing Bootstrap 4 default colors...

@kvnkrft You need to define the variables before importing bootstrap.scss:

$primary: red;

@import "~bootstrap/scss/bootstrap";

You can find more information in the official Bootstrap documentation: https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

@martinbean thanks for your help!

It's still not working, so strange...

// Variables
// @import "variables";
$brand-primary: #EB1158;
$primary: #EB1158;

// Bootstrap
@import "~bootstrap/scss/bootstrap";

I added _custom.scss to my /resources/assets/sass directory. Adding a single value works like $blue: red; but when I try to add the $theme-colors: (... the compile fails.

$theme-colors: (
  "primary": #ae00d9,
  "danger": #fffc36
);

The error is...

ERROR in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed:
  background-color: rgba($form-feedback-invalid-color,.8);
                   ^
      Argument `$color` of `rgba($color, $alpha)` must be a color

Backtrace:
    node_modules/bootstrap/scss/_forms.scss:280, in function `rgba`
    node_modules/bootstrap/scss/_forms.scss:280
...

I got the compile error to "go away" when moving the @import...

// Bootstrap
@import "~bootstrap/scss/bootstrap";
@import "custom";

but the rules don't show up / work.

@kvnkrft It’s not working because you’re using the wrong variable name.

They’ve been renamed in version 4 so it’s just $primary, not $brand-primary:

https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/scss/_variables.scss#L65

@martinbean but that's what I already tried. See my second post... and looking at https://getbootstrap.com/docs/4.0/getting-started/theming/ should it be

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

@kvnkrft Can you post your actual app.scss file, please? Because the error message you’ve posted above is nothing to do with setting the primary theme color.

This is what's happening right now:

..
$primary: yellow; // does not work
$blue: pink; // works

// Bootstrap
@import "~bootstrap/scss/bootstrap";
...

Of course @martinbean

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
// @import "variables";
// @import "custom";

$primary: yellow; // does not work
$blue: pink; // works

/* Throw error on compile
$theme-colors: (
  "primary": #ae00d9,
  "danger": #fffc36
);
*/


// Bootstrap
@import "~bootstrap/scss/bootstrap";


body {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.bg-company-green {
    background-color: #20b885;
}

td img.avatar {
    width: 35px; 
    height: 35px;
}

tr.clickable{
    cursor: pointer;
}

@kvnkrft Have you tried specifying hexadecimal values for your variables instead of naming colours?

It's strange, so strange... hex doesn't work either.

// $primary: yellow; // complies, but does not show
$primary:#00d92f; // complies, but does not show

$blue: rgb(173, 147, 151); // complies and shows up

/*
$theme-colors: (
  "primary": #ae00d9,
  "danger": #fffc36
);
*/

// Bootstrap
@import "~bootstrap/scss/bootstrap";

@kvnkrft What do you mean by “does not show”?

@martinbean "it doesn't show up" doesn't change the color of the primary buttons. So I am assuming that $blue isn't linked to $primary... so frustrating. Thanks for your help!

// $primary: yellow; // complies, but does not change the color of btn-primary
$primary:#00d92f; // complies, but does not change the color of btn-primary

// $blue: rgb(173, 147, 151); // complies and changes the color of btn-primary

/* Does not compile, thorws error
$theme-colors: (
  "primary": #ae00d9,
  "danger": #fffc36
);
*/

// Bootstrap
@import "~bootstrap/scss/bootstrap";

@kvnkrft You must have something else going on, because when I set $primary and include bootstrap, Mix compiles it as expected, both in beta 2 and 3.

@martinbean - yea. I'll keep on digging... Thanks for your help. I'll update this thread once I've figured it out.

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
// @import "variables";
// @import "custom";

/* Does not compile, thorws error
$theme-colors: (
  "primary": #ae00d9,
  "danger": #fffc36
);
*/

// Bootstrap
@import "~bootstrap/scss/bootstrap";

// $primary: yellow; // complies, but does not change the color of btn-primary
$primary:#00d92f; // complies, but does not change the color of btn-primary

// $blue: rgb(173, 147, 151); // complies and changes the color of btn-primary

/* Complies, but does not change the color of btn-primary
$theme-colors: (
  "primary": #ae00d9,
  "danger": #fffc36
);
*/

body {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.bg-company-green {
    background-color: #20b885;
}

td img.avatar {
    width: 35px; 
    height: 35px;
}

tr.clickable{
    cursor: pointer;
}

This is kind of a basic troubleshooting step, but one I messed up when I began customizing framework variables. Try pressing F5 in Chrome or the equivalent cache-reloading command or clearing your site history.

I've run into the same problem before... I'm starting out in the world of Laravel, and the variables stored in app.scss and _variables.scss need to be compiled via npm to apply.

Are you using Laravel Mix? This compiles the app and _variables.css into the files that are used by Laravel.

Find the info here

npm install and then npm run dev