Vue中JS和SCSS之间的共享变量 [英] Shared variables between JS and SCSS in Vue

问题描述

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

I've recently started using Vue.js 2, and I'm a fan of the single-file component structure:

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


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


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

我很好奇是否已经建立了在SCSS和JS之间传递变量的方法。我需要共享一个值，现在它在两个部分都是重复的。

I'm curious if there's an established way to pass variables between SCSS and JS, though. I need to share a value, and right now it's duplicated in both sections.

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

I used the Vue CLI to create this project, so it's being bundled with Webpack 2, using the vue-loader. I'm hoping there's a way to configure it to populate variables from JS to SCSS, or vice-versa.

推荐答案

您的问题将受益于更多细节。您需要多彻底的集成？有这个允许你创建一个JSON文件，并将这些值作为SCSS变量和JS（显然）。

Your question would benefit from more details. How thorough of an integration do you need? There's this which would allow you to create a JSON file and get those values as SCSS variables as well as JS (obviously).

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

如果你想要更简单的东西，你也可以使用：style 创建内联样式。这样就会动态。

If you want something more simple you can also create inline styles by using :style. That way it would be dynamic.

所以类似于：

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

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

Here's a quick demo of it: https://jsfiddle.net/4s25kca2/

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

It really depends on your exact need.

这篇关于Vue中JS和SCSS之间的共享变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！