Vue中JS和SCSS之间的共享变量答案

【问题标题】：Shared variables between JS and SCSS in VueVue中JS和SCSS之间的共享变量
【发布时间】：2017-07-19 10:51:21
【问题描述】：

我最近开始使用 Vue.js 2，我是单文件组件结构的粉丝：

<template>
  <h1>Hello World</h1>
</template>


<script>
export default {
  name: 'hello-world',
};
</script>


<style scoped lang="scss">
h1 {
  font-size: 72px;
}
</style>

不过，我很好奇是否存在在 SCSS 和 JS 之间传递变量的既定方法。我需要共享一个值，而现在它在两个部分中都是重复的。

我使用 Vue CLI 创建了这个项目，因此它使用 vue-loader 与 Webpack 2 捆绑在一起。我希望有一种方法可以将其配置为将变量从 JS 填充到 SCSS，反之亦然。

【问题讨论】：

我无法提供对 scss 的具体见解，但 css-variables 有 JavaScript 的 setter 和 getter；以下答案中显示了它的使用：stackoverflow.com/a/36088890/82548 和 stackoverflow.com/a/16943843/82548（免责声明：第二个答案是我自己的）。
谢谢大卫！是的，我希望 vue-loader 有办法在捆绑过程中处理它。

标签： javascript sass vue.js vuejs2

【解决方案1】：

您的问题将受益于更多细节。您需要多彻底的集成？有这个可以让您创建一个 JSON 文件并将这些值作为 SCSS 变量以及 JS（显然）获取。

https://github.com/Updater/node-sass-json-importer

如果您想要更简单的东西，您还可以使用:style 创建内联样式。这样它就会是动态的。

比如：

<div :style="{ height: heightInPixels }">...</div>

这是一个快速演示：https://jsfiddle.net/4s25kca2/

这真的取决于你的确切需求。

【讨论】：

嗨，比尔，感谢您抽出宝贵时间。所以，是的，我熟悉你提到的技术，我只是希望 Vue-loader （或相关插件）中有一个我缺少的方法。具体来说，我根据滚动位置动态设置元素的不透明度（使其淡入）。我最终通过 getBoundingClientRect 直接从 DOM 中读取了这个值；它不是一个优雅的解决方案，但它工作得很好。