Vue.js 项目中使用 SCSS 变量的技巧 - 如何在 SCSS 文件中使用 JavaScript 变量

在 Vue 项目中，我们可以使用以下方式在 SCSS 文件中使用 JS 变量：

1. 在 Vue 组件中定义 JS 变量：

export default {
  data() {
    return {
      primaryColor: '#007bff'
    }
  }
}

2. 在 SCSS 文件中使用 JS 变量：

$primary-color: #{this.primaryColor};

.btn-primary {
  background-color: $primary-color;
}

3. 在 Vue 组件中引入 SCSS 文件：

<style lang="scss" scoped>
@import "@/assets/styles/main.scss";
</style>

这样就可以在 SCSS 文件中使用 Vue 组件中定义的 JS 变量了。