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/

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

Vue中JS与SCSS共享变量

Shared variables between JS and SCSS in Vue

javascript

sass

vue.js

vuejs2