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

Question

我最近开始使用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，反之亦然。

Answer 1

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

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

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

所以像这样：

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

这是它的快速演示：https://jsfiddle.net/4s25kca2/

这实际上取决于您的具体需求。