Gulp Vue JS 没有在样式标签上编译冲突

Question

我正在尝试使用 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: {},

问题是，它没有编译。但是当我尝试

    .layout-wrapper { width: ${ '12345px' }; }

虽然它确实有效。调用数据对象有问题吗？

Answer 1

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

https://vuejs.org/guide/application.html#Single-File-Components

格式应为：

<style>

</style>
<template>

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

  }
</script>

style 部分也没有使用 Vue 变量的方法。您需要在模板中内联使用它们：

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

如果您想在样式部分使用不同的语言，请添加 lang 属性。如果您知道任何其他 css 语言，这可以让您使用变量：

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

Gulp Vue JS 没有在样式标签上编译冲突

Gulp Vue JS not compiling conflict on style tag

browserify

gulp

vue.js