Cannot compile *.vue modules with SCSS

[iraklisg]

I am using Laravel 5.3.19
node -v : 7.0.0
In my package.json

"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-11",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3"
}

In my gulpfile.js

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir((mix) => {
    mix.webpack('test/app.js', 'public/js/test/app.js');
});

In app.js entry point

window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

My vue component is the following

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body foo">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component ready.')
        }
    }

</script>

<style lang="scss" rel="stylesheet/scss">

    $myColor: #00ff00;
    .foo {
        background: $myColor;

    }
</style>

Finally when I run gulp, I get the following error

ERROR in ./resources/assets/js/test/components/Example.vue
Module not found: Error: Can't resolve 'scss' in '/home/igeorgas/webApps/apptree2/resources/assets/js/test/components'
 @ ./resources/assets/js/test/components/Example.vue 4:0-162
 @ ./resources/assets/js/test/app.js

and in my devtools console:

Uncaught Error: Cannot find module "!!vue-style-loader!css-loader?sourceMap!vue-loader/lib/style-rewriter?id=data-v-64df5ad8!scss!vue-loader/lib/selector?type=styles&index=0!./Example.vue"

Trying to do npm install vue-style-loader css-loader --save-dev and I still get exactly the same error

NOTE:

If I use<style lang="sass" ...> instead of <style lang="scss" ....> in my Vue component style tag, I get no errors and the module is successfully compiled

[mmieluch]

Well, it makes sense, because you're using SASS - this is what the extension language is called. .sass and .scss simply differentiate between old and new notation, but the language itself is still SASS. That is what I'm using in native Webpack config with vue-loader and it works just fine.

Not an issue IMHO.

[iraklisg]

It seems that this is an issue of vue-for-idea plugin and not of the laravel-elixir-vue-2 plugin as I faulty stated. In addition, there is allready a pull request #12 that maybe solves this problem

[CodeLookBook]

I have the same situation. When I use <style lang="sass" ...> instead of <style lang="scss" ....> in my Vue component style tag, the module is successfully compiled, but I still have allot of syntax errors in my Vue component style tag that are marked by red lines. It works fine but looks not very comfortable.

Vue.js Plugin installation in PhpStorm did not solve my problem.

[iraklisg]

@CodeLookBook if you want to use saas instad of scss you have to use the sass syntax (indented syntax, no curly braces). Please have a look here as well

The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3's syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax (or just “Sass”)