Multiple .css files in child theme

Question

First working with child themes in WP.

I created a new folder in themes folder with the name my-theme-name-child and placed style.css file which works.

Now, the original theme has a responsive stylesheet which is located in my-theme-name/css/layout.css how do I replicate this in my child theme?

I created the folder css in my child theme and created layout.css there like this:

@import url("../my-original-theme/css/layout.css");

@media only screen and (min-width: 769px)

#header {
    padding: 20.618em 0 !important;
}

Answer 1

I'd load the stylesheets directly instead. Open up functions.php inside your child theme and add the following code:

function wpse_load_parent_stylesheets() {
    wp_enqueue_style( 'layout', get_template_directory_uri() . '/css/layout.css' );
}
add_action( 'wp_enqueue_scripts', 'wpse_load_parent_stylesheets' );

Repeat wp_enqueue_style for each stylesheet you want to load.

Answer 2

After creating layout.css in the css folder of your child theme, you will have to write the below function in child theme's function.php, in order to load it:

function load_child_stylesheet() {
    wp_enqueue_style( 'layout', get_stylesheet_directory_uri() . '/css/layout.css' );
}
add_action( 'wp_enqueue_scripts', 'load_child_stylesheet' );

You can refer this article which talks of a similar issue