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 创建了这个项目，因此它使用 vue-loader 与 Webpack 2 捆绑在一起.我希望有一种方法可以将其配置为将变量从 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/

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

It really depends on your exact need.

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