Gulp Vue JS未编译样式标记上的冲突

我正在尝试使用gulp和browserify编译vue组件。我正在使用vueify来满足我的需要

这是我的代码

Vue.config.delimiters = ['${', '}'];

<style>
    .layout-wrapper { width: ${ canvas.test }; }
</style>

module.exports = {
    props: ['theme_id'],
    data: function() {
        return {
            canvas: {
                test: '12345px',
                content: {},

---

但它确实奏效了。调用数据对象时出现问题吗？

查看文档中的示例.vue文件：

格式应为：

<style>

</style>
<template>

</template>
<script>
  module.exports = {

  }
</script>

如果要在样式部分使用其他语言，请添加

lang

属性。如果您了解任何其他css语言，则可以使用变量：

<style lang="scss">
  $canvaswidth = '123px';
  .layout-wrapper {width: $canvaswidth}

$canvaswidth='123px'；
.layout包装{width:$canvaswidth}

我认为您无法将样式标记置于范围之下

<div :style="{width:canvas.test}">

<style lang="scss">
  $canvaswidth = '123px';
  .layout-wrapper {width: $canvaswidth}