Understrap Child-Theme Edit Not Visible, SASS Color Variable Not Applied

Wordpress (Understrap framework) custom JS not working

Resolved the issue by doing a fresh install of the Understrap child theme and migrating my already written custom files over.

Understrap - sass compile error

Its because the files has the same name but different extension it cant recognize witch to import.

Change

@import "theme/theme_variables"

to

@import     "theme/theme_variables.scss"

or for both // not sure if it will work

@import     "theme/theme_variables.scss"
@import     "theme/theme_variables.css"

Unable to override $theme-color in bootstrap

Update 2021 for Bootstrap 5

Per the guidance in the docs...

"Variable overrides must come after our functions are imported, but
before the rest of the imports."

Therefore, overriding the theme-colors in Bootstrap 5 works the same way as 4.x. In order to override the theme-colors, simply change appropriate theme color variable before importing bootstrap.scss

/* custom.scss */
/* change theme colors */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
/* end custom.scss */

@import '~bootstrap/scss/bootstrap.scss';

---

Update 2018 for Bootstrap 4.1

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the default value, and will then be set in all the theme-colors loops (btn-primary, bg-primary, text-primary, etc..)...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: #333333;
);

/* finally, import Bootstrap */
@import '~bootstrap/scss/bootstrap.scss';

Demo: https://www.codeply.com/go/lobGxGgfZE

---

Also see this answer

How to Compile SASS in a Wordpress Child Theme?

To summarize our findings from our comments & chat:

• Copy the entire sass directory into the child theme. Then when you edit a variable, everything gets recompiled.
• In the child theme, don't import the styles from the parent theme since we're now recompiling in the child theme.
• Since in this case there was an enqueue statement in the parent theme loading the style, we need to dequeue that style in the child theme. And you need to set the priority of the hook so that your dequeue gets called AFTER the enqueue (which had a priority of 999).

The code:

function uic_styles() { 
  wp_dequeue_style( 'slam-stylesheet' ); 
  wp_enqueue_style( 'slam-stylesheet', get_template_directory_uri() . '/library/css/style.css' ); 
  wp_enqueue_style( 'uic-styles', get_stylesheet_directory_uri() . '/library/css/style.css' ); 
} 
add_action( 'wp_enqueue_scripts', 'uic_styles', 1000 );

---

Related Topics