WordPress: override multiple css files in child th

Question

How can I enqueue more css files from the parent theme in the child theme and in which order?

Note: the previous method was to import the parent theme stylesheet using @import, but this is no longer best practice, because it uploads the stylesheet twice.

The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in the child theme's functions.php.

So, this is the correct PHP code to use:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

But this uploads only style.css and all themes have multiple css files, so how can I enqueue all of them? And how can I keep the proper order of uploading files?

For example, how can I enqueue the file main.css from the path theme_parent_directory/css/main.css in addition to style.css?

I hope that my English is clear. :)

Thank you in advance!

Answer 1

<?php

  add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles',999 );
  function theme_enqueue_styles() {
     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/css/main.css' );
     wp_enqueue_style( 'child-style',
      get_stylesheet_directory_uri() . '/style.css',
      array( $parent_style )
     );
}

?>