Search code examples
javascriptgulpbrowserifyvue.js

Adding a preprocessor language to the style portion of a vueify component causes build to fail without error

I'm experimenting with the vueify transformer. I have a test component called scoreboard:

<style>
.scorecard-panel{
    border: 1px solid green;
    background-color: #fbd900;

}
table{
    width: 300px;
    border-collapse: collapse;

}
th,td{
    border:1px solid blue;
    padding: 10px;
}
th{
    background-color:rgb(0, 10, 255);
    color: white;
    font-weight: bold;
}
</style>

<template>
    <div class="scorecard-panel">
        <table>
            <tr>
                <th>
                    Chris
                </th>
                <th>
                    Ruthie
                </th>
            </tr>
            <tr>
                <td>
                    <counter></counter>
                </td>
                <td>
                    <counter></counter>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
var counter = require('./counter.vue');

module.exports = {

    data: function (){
        return {
            test: 'worked'
        }
    },
    components:{
        counter: counter
    }
}
</script>

Everything works when the component is defined as above, but when I try to add the preprocessor language 'sass' to the style section:

<style lang="sass">
.scorecard-panel{
    border: 1px solid green;
    background-color: #fbd900;

}
...

My gulp build processes fails without error:

Example of build failing

Here's my gulp file for reference:

var browserify = require('browserify');
var gulp = require('gulp');
var vueify = require('vueify');
var source = require('vinyl-source-stream');

gulp.task('default', ['watch']);

gulp.task('build-app', function (){
    console.log('Building App...');
    return browserify('src/js/app.js')
        .transform(vueify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('public/js'));
});

gulp.task('watch', function (){
    gulp.watch('src/js/**/*.{js,vue}', ['build-app']);
});

Since I'm new to vueify (and vue really) I'm sure there's something that I'm doing wrong or missing that is causing this error. Does anyone see the hangup?

I should also note that I know the style rules in my example don't need a sass preprocessor as currently defined; I removed the nesting of the rules so that I could verify that it was the language preprocessor causing the error and not the rules' syntax.

Solution

  • Do you have the node-sass npm package installed?

    try npm install node-sass then run it again. Although I don't know DependableChangeClientV3 means.