javascript - 将预处理器语言添加到 vueify 组件的样式部分会导致构建失败而不会出现错误

Question

我正在尝试 vueify变压器。我有一个名为记分板的测试组件:

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

当组件按上述方式定义时，一切正常，但是当我尝试将预处理器语言“sass”添加到样式部分时:

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

}
...

我的 gulp 构建过程失败，没有错误:

这是我的 gulp 文件供引用:

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

由于我是 vueify 的新手(而且确实是 vue)，我确信我做错或遗漏了一些导致此错误的事情。有人看到挂机了吗？

我还应该注意，我知道示例中的样式规则不需要当前定义的 sass 预处理器；我删除了规则的嵌套，以便我可以验证是语言预处理器导致了错误，而不是规则的语法。

Answer 1

您是否安装了 node-sass npm 软件包？

尝试npm install node-sass然后再次运行它。虽然我不知道 DependableChangeClientV3 的含义。