在 vue 上使用 scss 无需 cli 或 webpack 的单文件组件答案

【问题标题】：Use scss on vue Single file component without cli or webpack在 vue 上使用 scss 无需 cli 或 webpack 的单文件组件
【发布时间】：2021-08-01 01:30:10
【问题描述】：

我正在开发一个基于 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 自动处理这个？

【问题讨论】：

您可以使用github.com/medialize/sass.js，但您应该与您的客户讨论在使用 SCSS 语法和添加 4.5Mb 依赖项之间的权衡。
完全如此，这有助于我证明为什么它会“即时”发生，我们目前正在研究使用scssphp.github.io/scssphp，并在每个文件上编译scss作为我们渲染的一部分进程

标签： sass vue-component http-vue-loader

【解决方案1】：

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

从@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

【讨论】：