前端 - vue中如何把scss文件中的值变成动态的？

Question

请教一下这样写为什么浏览器解析不了值 width直接没有了

 computed: {
    material_source_width() {
      return this.detailData.material_source == '2' ? '25%' : '33%'
    }
  }, 
<style lang="scss">
  $material-source-width: #{material_source_width};

  .information-right-item {
    display: flex;
    width: $material-source-width;
  }
</style>

Answer 1

<template>
  <div :style="{ width: material_source_width }" class="information-right-item">
    
  </div>
</template>

<script>
export default {
  computed: {
    material_source_width() {
      return this.detailData.material_source == '2' ? '25%' : '33%'
    }
  },
}
</script>

<style lang="scss">
  .information-right-item {
    display: flex;
   
  }
</style>

Answer 2

scss是css预编译,所以根本不会在浏览器参与任何计算,
你应该换个思路,用css变量来实现.
这个是简单的demo: Vue SFC Playground