将预处理器语言添加到 vueify 组件的样式部分会导致构建失败而不会出错
Adding a preprocessor language to the style portion of a vueify component causes build to fail without error
我正在试验 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 预处理器;我删除了规则的嵌套,以便我可以验证它是导致错误的语言预处理器,而不是规则的语法。
您是否安装了 node-sass
npm 包?
尝试 npm install node-sass
然后 运行 再试一次。虽然不知道DependableChangeClientV3
是什么意思。
我正在试验 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 预处理器;我删除了规则的嵌套,以便我可以验证它是导致错误的语言预处理器,而不是规则的语法。
您是否安装了 node-sass
npm 包?
尝试 npm install node-sass
然后 运行 再试一次。虽然不知道DependableChangeClientV3
是什么意思。