Are there any caveats to compiling all of my theme's SCSS into the style.css file in the theme root?

I work in WordPress development and I've always been told by more seasoned WP devs to compile my theme SCSS into a separate style.css file, typically into a sub-directory like assets/css/style.css.

Today however I read an interesting article on SitePoint where they talk about compiling their SCSS directly into the style.css file in the theme root directory (ensuring cssnano preserves the opening block comment meta), removing the need to enqueue a separate CSS file.

Additionally, on the WordPress Codex page for Theme Development it reads:

In addition to CSS style information for your theme, style.css provides details about the Theme in the form of comments.

There is no mention in the entire codex page about needing to separate your styles into another CSS file and enqueuing it via functions.php.

My question: Are there any caveats to compiling all of my theme's SCSS into the style.css file in the theme root?

Topic sass wp-enqueue-style theme-development Wordpress

Category Web

1
answered at

Your theme requires style.css to be present in the theme's root directory, with a comment header at the top containing information about he theme, like this:

/*
Theme Name: Twenty Nineteen
Theme URI: https://wordpress.org/themes/twentynineteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Requires at least: WordPress 4.9.6
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentynineteen
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/

So the only thing you really need to consider is whether your build process strips out comments. If compiling your SCSS removes comments, the resulting stylesheet won't be valid for style.css, because it would be missing the header comment. If you want to compile to style.css, make sure you're either not removing comments, or have a process to insert the comment after compilation.

Anything other than that is really just a matter of opinion, and how you prefer to organise things.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.