Vue3如何将API获取的数组传递给SCSS生成背景图样式？

你提到的问题核心在于 Sass是构建时预编译工具，无法访问组件运行时（比如API请求返回的）动态数据，所以直接把skills数组绑定到Sass变量的思路行不通。下面提供几种可行的实现方式：

方案一：动态绑定内联样式（最简单直接） #

在模板中循环skills数组，给每个元素直接绑定background-image内联样式，同时把通用样式写在Sass里：

<template>
  <div class="skills">
    <div 
      v-for="skill in skills" 
      :key="skill"
      class="skills__cell-inner"
      :style="{ backgroundImage: `url('@/assets/images/skills-icons/${skill}.svg')` }"
    >
      <!-- 组件内容 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestComponent',
  data() {
    return {
      skills: []
    }
  },
  async mounted() {
    // 模拟API请求获取数据
    const response = await fetch('/your-api-endpoint');
    this.skills = await response.json();
  }
}
</script>

<style lang="scss">
.skills__cell-inner {
  /* 通用样式 */
  width: 60px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 8px;
}
</style>

方案二：CSS变量 + 动态类名（兼顾类名规范） #

如果需要保留skills__cell-inner_${skill}这类命名规范的类名，可以结合CSS变量传递图片路径，同时在Sass中定义通用样式：

<template>
  <div class="skills">
    <div 
      v-for="skill in skills" 
      :key="skill"
      :class="`skills__cell-inner skills__cell-inner_${skill}`"
      :style="{ '--skill-img': `url('@/assets/images/skills-icons/${skill}.svg')` }"
    >
      <!-- 组件内容 -->
    </div>
  </div>
</template>

<script>
// 同方案一的脚本部分
</script>

<style lang="scss">
.skills__cell-inner {
  width: 60px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  /* 通过CSS变量获取动态图片路径 */
  background-image: var(--skill-img);
}

/* 可针对特定类名添加额外样式 */
.skills__cell-inner_test1 {
  border: 1px solid #eee;
}
</style>

方案三：动态生成Style标签（复杂场景适用） #

如果必须用类似Sass循环的逻辑生成样式，可以在获取数据后动态创建style标签，将生成的CSS内容插入页面。注意如果组件用了scoped样式，需要处理对应的data-v前缀：

<template>
  <div class="skills" ref="skillsContainer">
    <div 
      v-for="skill in skills" 
      :key="skill"
      :class="`skills__cell-inner skills__cell-inner_${skill}`"
    >
      <!-- 组件内容 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestComponent',
  data() {
    return {
      skills: []
    }
  },
  async mounted() {
    const response = await fetch('/your-api-endpoint');
    this.skills = await response.json();
    this.generateDynamicStyles();
  },
  methods: {
    generateDynamicStyles() {
      // 获取组件的scoped前缀（如果启用了scoped）
      const scopedAttr = this.$refs.skillsContainer.getAttribute('data-v-xxxxxx');
      const scopedSuffix = scopedAttr ? `[${scopedAttr}]` : '';

      let cssContent = '';
      this.skills.forEach(skill => {
        cssContent += `
          .skills__cell-inner_${skill}${scopedSuffix} {
            background-image: url('@/assets/images/skills-icons/${skill}.svg');
          }
        `;
      });

      // 创建并插入style标签
      const styleEl = document.createElement('style');
      styleEl.textContent = cssContent;
      document.head.appendChild(styleEl);
    }
  }
}
</script>

<style lang="scss" scoped>
.skills__cell-inner {
  width: 60px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
}
</style>

核心原因说明 #

Sass的编译过程发生在项目构建阶段（比如webpack编译时），此时组件还未在浏览器中运行，API数据也尚未获取，因此无法将运行时的动态数据传递给Sass变量。上述方案都是通过浏览器运行时的DOM操作或样式绑定来实现动态样式生成，绕过了Sass预编译的限制。

内容的提问来源于stack exchange，提问作者Abuddabi