Child theme not importing parent styles

Question

I have created a child theme for my parent theme. Just added style.css and functions.php files in child theme.

Original Theme Name: Verb Lite (Directory name verb-lite)

I created new folder verb-lite-child in themes folder, added the following files.

style.css file

/*
 Theme Name:   Verb Lite Child Theme
 Description:  A child theme of the Verb Lite theme
 Template:     verb-lite
 Version:      1.0.0
*/

functions.php file to enqueue parent styles,

<?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . 
    '/style.css' );
    }
?>

Now when I preview my theme, the styles are broken, the parent styles are not loaded.

Is there anything I missed there.

Answer 1

If I open syyle.css from original theme I see

*/ /* Themely is based off of Understrap which uses the Underscores starter theme merged with the Bootstrap Framework. The default styles can be found in /css/theme.css and /css.theme.min.css.

The styles loaded when I enqueued theme.css ad theme.min.css files.

My functions.php file now

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'verb-lite-styles', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'verb-lite-cssstyles', get_template_directory_uri() . '/css/theme.css' );
    wp_enqueue_style( 'verb-lite-cssMinstyles', get_template_directory_uri() . '/css/theme.min.css' );
}
?>

Answer 2

There is wrong $handle for the parent theme you use. Change parent-style to Verb Lite's verb-lite-styles.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style(
        'verb-lite-styles', // See here
        get_template_directory_uri() . '/style.css'
    );
}

parent-style is the same $handle used in the parent theme when it registers its stylesheet

(Citation from Codex)

Updated

according the OP's self-answer.

Verb Lite's 'enqueue styles' is poorly programmed and doesn't use style dependencies, as could be seen in it's inc/enqueue.php file.

Enqueue all the styles with the respect of their dependencies:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

    wp_enqueue_style(
        'verb-lite-understrap-styles',
        get_template_directory_uri() . '/css/theme.min.css',
        array() // no dependencies
    );
    wp_enqueue_style(
        'verb-lite-google-fonts',
        'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i|Open+Sans:100,300,400,600,700,700italic,600italic,400italic'),
        array(
            'verb-lite-understrap-styles',  // depends on understrap
        )
    );
    wp_enqueue_style(
        'verb-lite-styles',
        get_template_directory_uri() . '/style.css',
        array(
            'verb-lite-understrap-styles', // depends on both understrap and Google fonts
            'verb-lite-google-fonts'
        )
    );
}