theme style.css being loaded before bootstrap.css file

Dazzling
1

Hi,

I created a child theme from the Dazzling theme. But I noticed that the dazzling parent style.css is being loaded before the bootstrap css files, then comes my child style.css file.

This is not a huge deal, but a lot of things that the dazzling css overrides from bootstrap, I have to do manually in my style.css file.

Does anyone know a way to fix this so that the order of the css files is correct?

Thank you.

2

Found a solution. You have to add the dazzling-bootstrap css file in your childs function.php, like so:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'dazzling-bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css' );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
3

Instead of using this “advanced” function you could have just used simple:

@import url("…/dazzling/style.css");

via Child Theme style.css that way you wouldn’t need to prioritize how stylesheets are being loaded and everything would just work.

4

That will also work. But it’s considered bad practice to use @imports in child themes to get the parent styles. Wordpress recommends using the function above.