Vuex(Nuxt)에서 SAS와 Javascript 간의 변수 공유가 가능합니까?

Vuex(Nuxt)에서 SAS와 Javascript 간의 변수 공유가 가능합니까?

질문대로.Vue, Vuex(Nuxt)를 사용하고 있으며, @nuxtjs/style-resources: "^1.0.0"을 사용하여 모든 믹스인과 sass 변수를 공유합니다.

"nuxt-sass-resources-loader"의 최신 버전인 "^2.0.5"는 무엇입니까?

여기와 같은 웹 팩과 호환성이 있다는 것을 알고 있습니다.그러니까 궁금한 것은 비슷한 방법으로 웹 팩을 실행하는 것이 좋은지, 어떻게 설정하는지에 대한 것입니다.무엇을 설치해야 하는지, 어떻게 하면 nuxt.config.js에 추가할 수 있습니까?

편집: 나도 그 기사를 찾았지만 나에게는 효과가 없다.

간단한 답변: 네.

SAS 에는 변수를 내보내는 옵션이 준비되어 있습니다.이 옵션은 모듈로 Import하여 다른 오브젝트와 마찬가지로 사용할 수 있습니다.sass-loader 및 node-sass가 있는 웹 팩은 가져오기를 처리합니다.

예제:

// in assets/scss/variables.scss

$white-color: #fcf5ed;

// the :export directive is the magic sauce for webpack
:export {
  whitecolor: #{$white-color};
}

---

// in store.js

import Styles from '~/assets/scss/variables.scss'

export const state = () => ({
  styles: {...Styles}
})

---

// in component
...
computed: {
  styles() {
    return this.$store.state.styles;
  }
}

더 긴 답변:모든 것에 css 변수를 사용할 수도 있습니다.

예.

// in assets/scss/variables.scss

$white-color: #fcf5ed;

:root {
  --whitecolor: #{$white-color};
}

---

// in component
...
mounted() {
  this.$el.style.color = 'var(--whitecolor)';
}

<style>
.component {
  color: var(--whitecolor);
}
</style>

언급URL : https://stackoverflow.com/questions/57559472/is-it-possible-to-share-variable-between-sass-and-javascript-in-vuexnuxt