SCSS not working

I have added the scss loader:

    httpVueLoader.langProcessor.scss = function (scssText) {
        let css = ''
        sass.compile(scssText, function (result) {
            css = result.text
        })
        return css
    }

and in my template I have:

<style scoped lang='scss' src='page.scss'></style>

I know that the langProcessor works because if I add a console.log(css) I get valid css. Since I have working processors for pug and es6 via babel I don’t think my setup is broken.

If I just use plain css as in:

<style scoped>
  .main { color: red}
</style>

it also works.

I couldn’t import via @import inside my style tags because then the page.scss file was never found so I gave up on that. Still, I can’t see why this is not working.

[FranckFreiburger]

Since sass.compile is asynchronous, you should return a promise:

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

(untested)

[gaby64]

where do you get that sass.compile function? still fighting with that

https://github.com/medialize/sass.js/