在 vue 上使用 scss 单文件组件，无需 cli 或 webpack

如何解决在 vue 上使用 scss 单文件组件，无需 cli 或 webpack

我正在开发一个基于 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>

我的主页看起来像这样

<body>
    <div id="app">
        <headervue-1></headervue-1>
    </div>
    <script>
        new Vue({
          el: '#app',components: { 'headervue-1': httpVueLoader('https://192.168.0.104/modxMonster/renderedBlocks/headerVue1.vue'),}
          
        });
    </script>
</body>

到目前为止一切都很好，但是今天客户给了我们一个新要求，他们希望能够在组件中使用 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;
    }
  }
}

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

解决方法

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

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

//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 );
      }

走这条路的灵感来自this answer