javascript - Adding a preprocessor language to the style portion of a vueify component causes build to fail without error -
i'm experimenting vueify transformer. have 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 component defined above, when try add preprocessor language 'sass' style section:
<style lang="sass"> .scorecard-panel{ border: 1px solid green; background-color: #fbd900; } ... my gulp build processes fails without error:
here's gulp file 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 vueify (and vue really) i'm sure there's i'm doing wrong or missing causing error. see hangup?
i should note know style rules in example don't need sass preprocessor defined; removed nesting of rules verify language preprocessor causing error , not rules' syntax.
do have node-sass npm package installed?
try npm install node-sass run again. although don't know dependablechangeclientv3 means.
Comments
Post a Comment