Possible to compile secondary CSS for admin portal template?

[jibranb]

Possible duplicate:
https://github.com/orgs/bootscore/discussions/917

Hi bootscoreers,

I'm building a site where I use main.scss & _bootscore-custom.scss for the non-logged in version of the site. For logged in users I have an entirely different layout and CSS needs for portal users. This portal template will use custom header and footer files, header-portal.php & footer-portal.php.

I've tracked down the SASS compiling code to /wp-content/themes/bootscore/inc/scss-compiler.php (line 220) but do not see a way to hook into it to add a portal.scss custom stylesheet. I'm using the child bootscore theme and don't want to edit the parent themes code.

What is the recommended way to handle this? Or is there a better way to handle using main.scss that I'm not seeing?

Apologies if this is addressed somewhere but I've not found it in the docs or forum posts.

Thanks all!

-Jibran

function bootscore_compile_scss() {
  // Compile the main.scss file
  $scss_compiler_main = new BootscoreScssCompiler();
  $scss_compiler_main->scssFile('/assets/scss/main.scss')
                     ->cssFile('/assets/css/main.css')
                     ->addModifiedCheckTheme()
                     ->addModifiedCheck(get_template_directory() . '/assets/scss/bootstrap/bootstrap.scss', false)
                     ->compile();

  // Compile the editor.scss file
  $scss_compiler_editor = new BootscoreScssCompiler();
  $scss_compiler_editor->scssFile('/assets/scss/editor.scss')
                       ->cssFile('/assets/css/editor.css')
                       ->addModifiedSelf()
                       ->addModifiedCheck(get_template_directory() . '/assets/scss/bootstrap/bootstrap.scss', false)
                       ->addModifiedCheck('/assets/scss/_bootscore-variables.scss')
                       ->skipEnvironmentCheck()
                       ->compile();
}

[crftwrk]

Hi @jibranb,

this is a good question! While it's technical possible to compile more files since v6, you're right, there is no way to hook in yet. But we can simply add a do_action( 'bootscore_new_compiler' ); to scss-compiler.php:

function bootscore_compile_scss() {
  // Compile the main.scss file
  $scss_compiler_main = new BootscoreScssCompiler();
  $scss_compiler_main->scssFile('/assets/scss/main.scss')
                     ->cssFile('/assets/css/main.css')
                     ->addModifiedCheckTheme()
                     ->addModifiedCheck(get_template_directory() . '/assets/scss/bootstrap/bootstrap.scss', false)
                     ->compile();

  // Compile the editor.scss file
  $scss_compiler_editor = new BootscoreScssCompiler();
  $scss_compiler_editor->scssFile('/assets/scss/editor.scss')
                       ->cssFile('/assets/css/editor.css')
                       ->addModifiedSelf()
                       ->addModifiedCheck(get_template_directory() . '/assets/scss/bootstrap/bootstrap.scss', false)
                       ->addModifiedCheck('/assets/scss/_bootscore-variables.scss')
                       ->skipEnvironmentCheck()
                       ->compile();
  
  // Allow child themes to create additional compilers
  do_action( 'bootscore_new_compiler' );
  
}

Now you can create a new custom.scss file in child-theme's folder assets/scss and add a new compiler in functions.php:

/**
 * Add a new compiler
 */
add_action( 'bootscore_new_compiler', function() {

  // Only compile if the file exists
  if ( file_exists( get_stylesheet_directory() . '/assets/scss/custom.scss' ) ) {

    $compiler = new BootscoreScssCompiler();
    $compiler->scssFile('/assets/scss/custom.scss')
             ->cssFile('/assets/css/custom.css')
             ->addModifiedCheckTheme() // optional
             ->compile();
  }

});

Then simply enqueue new file:

/**
 * Enqueue new compiled file
 */
add_action( 'wp_enqueue_scripts', function() {
  wp_enqueue_style(
    'child-custom',
    get_stylesheet_directory_uri() . '/assets/css/custom.css',
    array( 'main' ), // optional dependency
    filemtime( get_stylesheet_directory() . '/assets/css/custom.css' )
  );
});

Add as many new files as you want.

Let me know if this suits your needs. If so, please open a pull request, we will merge that.

[jibranb]

This is hugely helpful, @crftwrk! Thanks.

[crftwrk]

Great! Do you want to open a pull request with the new hook? So we can merge and you can use it right now.

[jibranb]

Appreciate the option! But I'm not setup to do a PR at the moment. I have a separate private repo elsewhere so I'd need to reorganize my project to do that. Let you know if that changes.