Child theme does not load all style

Question

I know this thing has been posted several times now, but I can't figure it out. I am asking for your help. I have created theme child before, for other WordPress themes, but this one is giving me hard times.

The theme is called: neobeat

My CSS files look like this:

Theme Name:   Neobeat Child
Theme URI:    http://example.com/
Description:  Neobeat Child Theme
Author:       Something
Author URI:   http://example.com
Template:     neobeat
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive layout
Text Domain:  neobeat-child

and my functions.php file looks like this:

add_action( 'wp_enqueue_scripts', 'neobeat_child_enqueue_styles' ); 
function neobeat_child_enqueue_styles() {
 $parent_style = 'neobeat-theme-style'; 
 wp_enqueue_style( $parent_style, get_template_directory_uri() . 
'/style.css' );

wp_enqueue_style( 'style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
);
}

the $handle in the parent folder in functions.php looks like this:

wp_enqueue_style( 'neobeat-theme-style', get_stylesheet_uri(), 
       array( 'font-awesome', 'material-icons', 'magnific-popup',
       'linear-icons' ), NEOBEAT_THEME_VERSION );

When I upload the files in neabeat-child folder:

1. all the CSS files from the array are not loaded: font-awesome, material-icons, linear-icons
2. the order of the CSS files is not the same, it changes order

Answer 1

Child themes load before the parent theme, so when you enqueue a stylesheet with the handle of the parent theme, the parent theme is not able to register or enqueue a stylesheet with that name. So when you enqueue a stylesheet named neobeat-theme-style, the parent stylesheet won't be able to enqueue a stylesheet with that name.

So this in the parent is not doing anything:

wp_enqueue_style( 'neobeat-theme-style', get_stylesheet_uri(), 
       array( 'font-awesome', 'material-icons', 'magnific-popup',
       'linear-icons' ), NEOBEAT_THEME_VERSION );

This means that the only stylesheets that are being enqueued are the ones you are enqueueing in the stylesheet:

$parent_style = 'neobeat-theme-style'; 
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'style',
   get_stylesheet_directory_uri() . '/style.css',
   array( $parent_style ),
   wp_get_theme()->get('Version')
);

Notice that none of those other stylesheets are mentioned here at all. So they're not going to be enqueued.

If you want to enqueue the parent theme's stylesheet from within the child theme, then you also need to include its dependencies and version.

I suggest registering the parent theme's styles with the same handle, thus preventing the parent theme from enqueueing the child theme's stylesheet, and then using it as a dependency on your child theme stylesheet:

// Parent theme's stylesheet with its dependencies.
wp_register_style(
    'neobeat-theme-style', 
    get_parent_theme_file_uri( 'style.css' ),
    ['font-awesome', 'material-icons', 'magnific-popup', 'linear-icons'],
    NEOBEAT_THEME_VERSION
);

// Child theme's stylesheet.
wp_enqueue_style(
    'neobeat-child-style',
    get_stylesheet_uri(),
    ['neobeat-theme-style'],
    wp_get_theme()->get( 'Version' )
);