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}