When working with WordPress themes its always a good idea to create a child theme of the parent theme you are using, doing this is a relatively painless exercise. Create a folder matching the parent theme's name appended with the '-child' i.e. if twentytwentyone is the parent then create twentytwentyone-child.
Two files required for a basic child theme are style.css and functions.php
/*
Theme Name: Twenty Twenty One Child
Theme URI: http://example.com/twenty-twenty-one-child/
Description: Twenty Twenty One Child Theme
Author: Matthew Hodge
Author URI: http://example.com
Template: twentytwentyone
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, accessibility-ready
Text Domain: twentytwentyonechild
*/
add_action( 'wp_enqueue_scripts', 'my_enqueue_function' );
function my_enqueue_function() {
$parent_handle = 'twenty-twenty-one-style';
$theme = wp_get_theme();
wp_enqueue_style( $parent_handle, get_template_directory_uri() . '/style.css', [], $theme->parent()->get('Version') );
wp_enqueue_style( 'twenty-twenty-one-child-style', get_stylesheet_uri(), [ $parent_handle ], $theme->get('Version') );
}
Do take note that when enqueueing you need to update the above code sample parent_handle to match that of the parent theme and to reference the correct style (failure to do so may result in the theme being included twice pending how the parent theme was written), as the style.css itself might be named something different for example main.css.
Last tip when dealing with enqueuing files is that the version will get cached by the browser, in order to ensure your changes are taking effect you would have to update the Version declaration inside your style.css (production) or alternatively you could use the time() / filemtime()
wp_enqueue_style( 'twenty-twenty-one-child-style', get_stylesheet_uri(), [ $parent_handle ], time() );
//OR
wp_enqueue_style( 'twenty-twenty-one-child-style', get_stylesheet_uri(), [ $parent_handle ], filemtime( get_stylesheet_directory() . '/style.css' ) );
If using the time() take care as this should never be pushed to production, what would be best is to have your webpack produce the style from your assets increasing the version for you during your build process (if you have this available).