javascript - 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/

这实际上取决于您的确切需求。