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之间的共享变量

1 个答案: