与此同时，我一直在尝试，经过一些试验和错误，我想出了一个小脚本，让人们有一个类似于我在我的第一个问题问的结构。我已经创建了一个回购，但请在下面找到详细的描述。我知道这是还没有完善，但可能是一些有趣的开始。
因此，我创建了一个小脚本，它依赖于Gulp和SCSSPHP来编译在PHP文件中定义的组件中使用的sass，这些组件遵循类似于Vue.Js组件定义样式的样式。
Link for the Github repo of Compomatic
这将允许您拥有这样的东西：
my-component.php

<!-- ##### COMPONENT STYLES ##### -->
<style>
//Here I will define all my sass for the component
#my-component{
   
 h3{
   color:red;
  }

 p{
   font-size: 12px;
  }
}
</style>

<!-- ##### COMPONENT BODY ##### -->
<div id="#my-component">
<h3>Hello!</h3>
<p><?php echo somefunction(foo);?></p>
</div>

<!-- ##### COMPONENT SCRIPTS ##### -->
<script>
//some component specific javascript will be here....
</script>

这些文件应该在你的wordpress主题的./components文件夹中创建。

如何使用-说明

• • 1**-确保系统中安装了composer和npm。
• • 2**-转到你想要安装编译器的wordpress主题并运行：

composer require scssphp/scssphp

• • 3**-将compomatic.php和gulpfile.js文件复制到主题根目录。另外，创建一个名为components的新文件夹，在其中放置您的组件。
• • 4**-在主题的functions.php中包含以下行：

require_once(“compomatic.php”)

• • 5**-运行以下命令：npm init
• • 6**-运行以下命令：npm install gulp gulp-phpunit gulp-shell gulp-watch --save-dev
• • 7**-然后运行gulp watch

从那时起，在开发过程中，对components目录的所有更改都将触发sass编译器。输出的编译后的css文件夹以及附加的scss include文件夹（例如您自己的mixin集合、变量、通用样式等）将根据您的喜好在compomatic.php文件中进行修改。
以下是可以修改的变量：

/*******************************************
* CUSTOMIZE THESE VARIABLES TO YOUR LIKING *
********************************************/

$output_file  =  './assets/css/test.css';  // Define output file
$output_dir  =  dirname($output_file);  // Get the directory of the output file
$additional_includes  =  './src/scss/test.scss';  //add any additional includes, fo example a set of mixins, variables or general styles...

如何加载组件？

Compomatic有一个helper函数来加载组件，这个helper函数所做的就是获取组件并删除<style>标签中的所有内容，这样标签的内容就不会污染DOM，因为这些样式已经从编译后的css中提供了。
要使用helper函数，您只需按如下方式操作：

load_component("/components/my-component");

备注：

不要忘记将生成的CSS文件加入队列。Compomatic保存输出文件的默认位置是：./assets/css/components.css

wp_register_style('components',get_template_directory_uri() .  '/assets/css/components.css',array(),'1.0');
// Enqueue components stylesheet.
wp_enqueue_style('components');