FranckFreiburger / http-vue-loader

load .vue files from your html/js
MIT License
1.49k stars 275 forks source link

Scss compilation #69

Open Arturokin12 opened 5 years ago

Arturokin12 commented 5 years ago

I've been working with scss tag but, using the code in the example, i can't get it to work, i just see a "ReferenceError: sass is not defined" message, how can i make this work?

ZhaolYang commented 3 years ago

I have the same question, where can I get the sass.js ?

joshgrift commented 3 years ago

Likewise! It doesn't seem to be the dart-sass compilation.

longqizhu commented 3 years ago

I have the same question

uier commented 3 years ago

As mentioned in https://github.com/FranckFreiburger/http-vue-loader/issues/33, you can get sass.js from https://github.com/medialize/sass.js

To avoid receiving "ReferenceError: sass is not defined", declare a variable sass and assign an instance constructed by sass.js.

The following example works for me.

<script src="<path_to>/sass.js"></script>
<script>
  const sass = new Sass()
  httpVueLoader.langProcessor.scss = function (scssText) {
    return new Promise(function(resolve, reject) {
      sass.compile(scssText, function (result) {
        if ( result.status === 0 )
          resolve(result.text)
        else
          reject(result)
      });
    });
  }
  new Vue({
    el: '#my-app',
    components: {
      'my-component': httpVueLoader('my-component.vue')
    }
  });
</script>