Vue에서 JS와 SCSS 사이의 변수 공유

Vue에서 JS와 SCSS 사이의 변수 공유

나는 최근에 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로, 또는 그 반대로 변수를 채울 수 있도록 구성할 수 있는 방법이 있었으면 좋겠다.

당신의 질문은 좀 더 세부적인 것으로부터 이익을 얻을 것이다.얼마나 철저한 통합이 필요한가?JSON 파일을 생성하고 이러한 값을 JS(확실성)뿐만 아니라 SCS 변수로 가져올 수 있는 것이 있다.

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

만약 당신이 좀 더 간단한 것을 원한다면 당신은 또한 다음을 사용하여 인라인 스타일을 만들 수 있다.:style그렇게 하면 역동적일 겁니다.

그래서 다음과 같은 것이 있다.

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

이에 대한 간단한 데모: https://jsfiddle.net/4s25kca2/

그것은 정말로 너의 정확한 필요성에 달려있다.

참조URL: https://stackoverflow.com/questions/42509230/shared-variables-between-js-and-scss-in-vue