Use scss on vue Single file component without cli or webpack

Question

Use scss on vue Single file component without cli or webpack

126 views Asked by Camilo Casadiego At 10 May 2021 at 16:07

I'm developing a PHP based system where I cannot use webpack, NPM or the Vue CLI, my page has several components that are loaded on real-time using httpVueLoader, one example of such component is as follows

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

and My main page looks like this

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

So far everything is working like a charm, but today the client gave us a new requirement, they want to be able to use scss in the components, so the original styles from my first code sample should look like this:

.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;
    }
  }
}

My initial guess is that I need to compile the scss section and generating a temp file to be passed to httpVueLoader but IM wondering if there a way to add the sass loader from CDN to have the vueLoader process this automatically?

Original Q&A

There are 1 answers

**Camilo Casadiego** · Answer 1 · 2021-05-10 23:24:17

In case someone is facing the exact same requirement, this is what I did:

Starting from @jonrsharpe comment, I decided to take a look at different bundling options but each option out would lead to overhead to the final pages, so having the fact that I was already generating the component dynamically, decided just to parse the original .vue file, extract the scss portion, compile it with scssPhp and the final code looks like this:

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

The inspiration to follow this path came from this answer

TechQA.

Use scss on vue Single file component without cli or webpack

There are 1 answers

Related Questions in SASS

Related Questions in VUE-COMPONENT

Related Questions in HTTP-VUE-LOADER

Popular Questions

Popular Tags

Trending Questions