VueJ 컴포넌트 간에 공통 CSS 공유

VueJ 컴포넌트 간에 공통 CSS 공유

저는 VueJs 2 프로젝트를 진행하고 있는데 코드를 정리하려고 하지만 스코프 스타일링에 어려움을 겪고 있습니다.

여기 제 요구 사항이 있습니다.:)

서로 매우 유사한 컴포넌트가 3개 있기 때문에mixins코드를 하나의 파일로 병합합니다.각 컴포넌트는 그것을 사용합니다.mixins둘 다template그리고.vuejs특정 컴포넌트의 조건을 커스터마이즈하고 싶을 때는, 그 컴포넌트의 코드를 덮어쓰기만 하면, 이 부분에서는 정상적으로 동작합니다.

하지만 한 가지 더 하고 싶은 게 있는데scoped style믹스인에 대해서도요.현재 스타일은 에 싸여 있다.<style lang="scss" scoped></style>태그와 이 스타일은 컴포넌트에 매우 적합하지만 스타일링 코드를 3개의 컴포넌트에 모두 복제해야 합니다.

이러한 스타일을 글로벌 css 파일에 추가할 수 있다는 것은 알고 있습니다만, 글로벌 스코프에 스타일을 추가하고 싶지 않습니다.이 3개의 컴포넌트는 1개뿐입니다.

이 스타일을 추가하여 믹스인에 적용할 수 있는 방법이 있습니까?

이 케이스를 코드화하기 위한 베스트 프랙티스는 무엇입니까?

Vue는 이것을 쉽게 한다.

솔루션

구성요소에서 공유 스타일을 사용하려면 다음과 같이 하십시오.

My Component.js

<template>
</template>

<script>
</script>

<style lang="scss" scoped>
  @import '@/scss/shared-styles.scss';
  @import 'styles.scss'; // this is the regular CSS used just by the component
</style>

대안

다음과 같이 컴포넌트 CSS 파일에 공유 CSS 파일을 Import할 수도 있습니다.

My Component.js

<template>
</template>

<script>
</script>

<style lang="scss" scoped>
  @import 'styles.scss';
</style>

styles.scss

@import '@/scss/shared-styles.scss'

// rest of your component CSS

전역 스타일 자동 가져오기

모든 구성요소에서 특정 스타일을 사용할 수 있도록 하려면 이 작업을 수행할 수 있습니다.

vue.config.module

module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/global.scss";
        `
      },
    },
  },
}

제가 방금 알게 된 건scoped style또한 하위 구성 요소에도 영향을 미칩니다.

그래서 해결책을 찾았는데, 그것이 베스트 프랙티스인지는 잘 모르겠지만, 나는 그것에 대해 매우 기분이 좋다.

작성하다WrapperComponent그리고 나는 그것을 넣었다.scoped style여기에 작은 템플릿이 있습니다.

<template>
    <div>
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
    /* css style that will apply to all children */
</style>

어떤 컴포넌트를 이 컴포넌트로 포장하면WrapperComponent템플릿은 다음 경유로 HTML로 전달됩니다.slot앞으로는 어떤 수정이나 스타일도 적용 가능합니다.

인mixins이 래퍼를 Import하여 컴포넌트 템플릿을WrapperComponent여기 예가 있습니다.

import WrapperComponent from './WrapperComponent'

let MyMixins = {

    template: `<wrapper-component>
        <div>
            Whatever HTML code here
        </div>
    </wrapper-component>`,


    components: {
        WrapperComponent,
    },
};

이걸 쓰면mixins또는 하위 구성 요소, 스타일WrapperComponent는 자동으로 적용되며 동일한 상위 스타일을 사용하려는 다른 구성요소 그룹과 함께 사용할 수도 있습니다.

예를 들어 모듈을 사용하여stylesection(scope Attribute)

https://vue-loader.vuejs.org/en/features/css-modules.html

이렇게 하면 CSS는 글로벌 스타일링의 일부가 아니라 스코프가 유지됩니다.

방금 fadeTransition.css 파일을 vue app/assets 폴더에 드롭하고 다음과 같이 Import했습니다.

<template>
  <transition name="fade">
    <div v-if="showContent">test</div>
  </transition>
</template>
<script>
  import '@/assets/fadeTransition.css';
  // component definition
</script>

페이드트랜지션.css

/* fade menus in, not out */
.fade-enter-active {
  transition: opacity .5s;
}
.fade-enter {
  opacity: 0;
}

깔끔하고 심플합니다.검시관에게도 효과가 있을 거야

건배!

언급URL : https://stackoverflow.com/questions/48806433/sharing-common-css-across-vuejs-components