Nuxt config 다이내믹 스타일시트

Nuxt config 다이내믹 스타일시트

UI 버튼을 클릭해서 스타일시트를 동적으로 (Nuxt.js로) 로드하려면 어떻게 해야 하나요?

예를 들어, 제 안에 이런 게 있어요.nuxt.config.js:

let org = 'default';

module.exports = {
    css: [
        '~/assets/sass/' + org + '/index.scss',
    ]
};

이 블록에서 몇 가지 코드를 생략했습니다만, 지금 보고 계신 것은 질문에 답하는 데 필요한 메인 코드입니다.

기본적으로 UI 버튼이 있어 클릭할 때 값을 변경하고 싶다.orgNuxt가 그 스타일시트를 로드하도록 합니다.default하나.

내가 어떻게 이런 일을 할 수 있을까?

나도 내 본업에서 뭔가를 하는 것을 만지작거리고 있었다..vue다음과 같은 파일:

export default {
   data() {
     return {
       skin: 'default',
     }
   },
   methods: {
     changeMe() {
       this.skin = 'other';
     }
   },
   head () {
      return {
        css: [
          '~/assets/sass/skins/' + this.skin + '/index.scss',
        ]
      }
   }
 }

그리고 저는 제 노래도 포함시킬 수 있었어요.default피부 관리:

<style lang="scss" rel="stylesheet/scss">
  @import '~assets/sass/default/index';
</style>

너무 아쉽다 내 거 못 살려서org다음과 같은 작업을 수행합니다.

<style lang="scss" rel="stylesheet/scss">
  @import '~assets/sass/' + this.org + '/index';
</style>

이걸 하기 위해서.조직별로 CSS 파일을 정의해야 합니다.이것은 scss 파일이 아닌 CSS 파일이라고 밖에 생각할 수 없습니다.https://codesandbox.io/s/l4on5508zm에서 작업 데모와 함께 아래 코드를 확인하십시오.

<template>
  <section>
    <h1>Index</h1>
    <button @click="swap">swap</button>
    <p v-text="cur" />
  </section>
</template>

<script>
export default {
  head() {
    return {
      link: [
        {
          rel: "stylesheet",
          href: `/${this.cur}.css`
        }
      ]
    };
  },
  data() {
    return {
      cur: "light"
    };
  },
  methods: {
    swap() {
      if (this.cur === "light") {
        this.cur = "dark";
      } else {
        this.cur = "light";
      }
    }
  }
};
</script>

위의 코드 스니펫을 보면 css 파일을 가져와 페이지에서 동적으로 사용할 수 있습니다.head()기능.잘 생각해 보고 https://codesandbox.io/s/l4on5508zm에서 데모를 확인하세요.

언급URL : https://stackoverflow.com/questions/50354650/nuxt-config-dynamic-stylesheet