Sass 在不带cli或webpack的vue单文件组件上使用scss

我正在开发一个基于PHP的系统，无法使用webpack、NPM或Vue CLI，我的页面有几个组件，这些组件是使用httpVueLoader实时加载的，此类组件的一个示例如下

<template>
  <section class="Header-Top topHeader_mobile" id="header">
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-12">
        <div class="HeadRight-Phone">
          <h1><i class="fa fa-phone"></i> {{ krakenBlock.contactNumber }}</h1>
        </div>
        <div class="HeadList">
          <ul>
            <li><a href="#" :title="krakenBlock.menuOpt1">{{ krakenBlock.menuOpt1 }}</a></li>
            <li><a href="#" :title="krakenBlock.menuOpt2">{{ krakenBlock.menuOpt2 }}</a></li>
            <li><a href="#" :title="krakenBlock.menuOpt3">{{ krakenBlock.menuOpt3 }}</a></li>
            <li><a href="#" :title="krakenBlock.menuOpt4">{{ krakenBlock.menuOpt4 }}</a></li>
            <li><a href="#" :title="krakenBlock.menuOpt5">{{ krakenBlock.menuOpt5 }}</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  </section>
</template>

<script>
module.exports = {
  name: "headerVue1",
  data() {
    return {
      krakenBlock: {"menuOpt1":"WHY US","menuOpt2":"FAQS","menuOpt3":"Packing Boxes","menuOpt4":"Van Sizes","menuOpt5":"Payments","contactNumber":"01904 390 906"}
    };
  },
};
</script>
<style scope>
.HeadList {
  margin: 0;
  padding: 12px 0;
  float: right;
}

.HeadList ul {
  margin: 0;
  padding: 0;
}

.HeadList ul li {
  margin: 0;
  padding: 0 0 0 35px;
  list-style: none;
  display: inline-block;
}

</style>

---

我最初的猜测是，我需要编译scss部分并生成一个临时文件以传递给httpVueLoader，但我想知道是否有办法从CDN添加sass加载程序，使vueLoader自动处理此问题？

如果有人面临完全相同的要求，我会这样做：

从@jornsharpe comment开始，我决定查看不同的捆绑选项，但每个选项都会导致最终页面的开销，因此我已经在动态生成组件，决定只解析原始的.vue文件，提取scss部分，使用编译，最终代码如下所示：

.HeadList {
margin: 0;
padding: 12px 0;
float: right;
  ul {
    margin: 0;
    padding: 0;
    li {
      margin: 0;
      padding: 0 0 0 35px;
      list-style: none;
      display: inline-block;
    }
  }
}

//Now we compile the SCSS
      $separator = "\n";
      $line = strtok($blockContent, $separator);
      $finalBlock = '';
      $styleSection = '';
      while ($line !== false) {
        $finalBlock .= $line . "\n";
        if (mb_strpos($line, '<style') === 0) {
          // Do while para halar el estilo...?
          do{
            $line = strtok( $separator );
            $styleSection .= (mb_strpos($line, '</style>') === 0) ? '' : $line;
          } while(!(mb_strpos($line, '</style>') === 0));
          //now se parse the style
          $compiledStyle =  $this->scss->compile($styleSection);
          $finalBlock .= $compiledStyle;
          $finalBlock .= "</style>";
        }
        $line = strtok( $separator );
      }

//现在我们编译SCS
$separator=“\n”；
$line=strtok（$blockContent，$separator）；
$finalBlock=''；
$styleSection=''；
而（$line！==false）{
$finalBlock.=$line.“\n”；
如果（mb_strpos（$line），您可以使用，但您应该与您的客户讨论使用SCSS语法和添加4.5Mb依赖项之间的权衡。这有助于我证明为什么要“动态”使用它接下来，我们正在考虑在每个文件上使用并编译SCS，作为渲染过程的一部分
//Now we compile the SCSS
      $separator = "\n";
      $line = strtok($blockContent, $separator);
      $finalBlock = '';
      $styleSection = '';
      while ($line !== false) {
        $finalBlock .= $line . "\n";
        if (mb_strpos($line, '<style') === 0) {
          // Do while para halar el estilo...?
          do{
            $line = strtok( $separator );
            $styleSection .= (mb_strpos($line, '</style>') === 0) ? '' : $line;
          } while(!(mb_strpos($line, '</style>') === 0));
          //now se parse the style
          $compiledStyle =  $this->scss->compile($styleSection);
          $finalBlock .= $compiledStyle;
          $finalBlock .= "</style>";
        }
        $line = strtok( $separator );
      }