How to Compile SASS in a Wordpress Child Theme? How to Compile SASS in a Wordpress Child Theme? wordpress wordpress

How to Compile SASS in a Wordpress Child Theme?


To summarize our findings from our comments & chat:

  • Copy the entire sass directory into the child theme. Then when you edit a variable, everything gets recompiled.
  • In the child theme, don't import the styles from the parent theme since we're now recompiling in the child theme.
  • Since in this case there was an enqueue statement in the parent theme loading the style, we need to dequeue that style in the child theme. And you need to set the priority of the hook so that your dequeue gets called AFTER the enqueue (which had a priority of 999).

The code:

function uic_styles() {   wp_dequeue_style( 'slam-stylesheet' );   wp_enqueue_style( 'slam-stylesheet', get_template_directory_uri() . '/library/css/style.css' );   wp_enqueue_style( 'uic-styles', get_stylesheet_directory_uri() . '/library/css/style.css' ); } add_action( 'wp_enqueue_scripts', 'uic_styles', 1000 );


The SCSS file in my parent theme

'theme-name/assets/scss/style.scss'

@import "base/fonts";@import "variables/all";@import "underscores/style";@import "wordpress-overrides";@import "inc/init";

The SCSS file in my child theme

'theme-name-child/assets/scss/style.scss'

/*Theme Name:   Theme Name ChildTheme URI:    Description:  Theme Name Child ThemeAuthor:       Theme Name, Co.Author URI:   Template:     owVersion:      1.0.0License:      GNU General Public License v2 or laterLicense URI:  http://www.gnu.org/licenses/gpl-2.0.htmlTags:         responsive-layout, accessibility-readyText Domain:  my-name-theme-child*//* My Name Parent Theme Styles *//* --------------------------- */@import "../../../theme-name/assets/scss/style";/* My Name Child Theme Styles *//* -------------------------- *//* Base */@import "base/fonts";@import "variables/all";@import "base/mixins";@import "base/base";/* Templates */@import "templates/template-menu";/* Inc */@import "inc/init";

I compile 'theme-name-child/assets/scss/style.scss' into 'theme-name-child/style.css'