Use class from css file in another directory

[theyuv]

Hello, I'm very new to both wp and Less.

I would like to use Less in order to mixin bootstrap classes.

I created a theme-main.less file in my child theme which includes the code to mixin the class:

#sidebar-right .widget ul {
  .list-group;
}

And then I wish to use the bootstrap.css file that's part of my parent theme so I put the following code in my functions.php file:

    wp_enqueue_style( 'bs', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'theme-main',
        get_stylesheet_directory_uri() . '/theme-main.less',
        array( 'bs'),
        wp_get_theme()->get('Version')
    );

(This is so I can use the .list-group class of the bootstrap.min.css file) I still get the error:

Fatal error: Uncaught exception 'Less_Exception_Compiler' with message '.list-group is undefined in /var/www/html/forum/wp-content/themes/bootstrap-basic-child/theme-main.less'...

I suppose I can just copy the bootstrap.min.css file into my child folder and then via Less scope, it will know to access the file, but it's probably better practice to enqueue it, right?

Can you detect what I'm doing wrong? How can I mixin the bootstrap class in my child theme less file? It's possible I don't entirely understand what wp_enqueue_style() does and am misusing it.

Thank you.

[theyuv]

I actually got this working by using an import statement at the top of my child theme's css file:

@import (reference) '...mixins.less';

Is this the recommended way to achieve what I want?

Thanks.

[s3w47m88]

Thanks. This helped me to get it working as well. I simplified it though:

wp_enqueue_style( 'global', get_stylesheet_directory_uri() . '/global.less', wp_get_theme()->get('Version'));``

[pixelbart]

Closed, due to age. If the problem persists, please reopen the issue.