Vue 글로벌 css 자체 덮어쓰기를 여러 번 방지하는 방법

Vue 글로벌 css 자체 덮어쓰기를 여러 번 방지하는 방법

내 vue 프로젝트에서 나는 리셋 파일 등과 같이 세계적으로 정의된 css를 가지고 있다.내 vue.config에서 다음을 사용하여 이 css를 로드한다.

css: {
  loaderOptions: {
    sass: {
      data: `
        @import "@/assets/styles/styles.scss";
      `,
    },
  },
},

내가 브라우저 스타일을 보면 css가 스스로 50번 이상 덮어쓰는 것처럼 보인다.

나는 무엇이 이 행동을 유발하는지 궁금하다.

vue.config.js에는 변수, 혼합물, 함수만 입력하십시오.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/sass/_colors.scss";
          @import "@/assets/sass/_variables.scss";
          @import "@/assets/sass/_mixins.scss";
          @import "@/assets/sass/_functions.scss";
        `
      }
    }
}

자, style.scss에는 다음과 같은 스타일을 입력하십시오.

@import "reset";
@import "base";
@import "fonts";
@import "z-index";
@import "transitions";
@import "util";

main.js에서 styles.scss 가져오기

import '@/assets/styles/styles.scss'

라우터.js가 가져오는 모든 구성요소의 스타일 블록 앞에 전역 스타일 파일을 첨부하는 경우.

그 결과, 같은 css 클래스에 대한 정의가 많이 존재하는데, 이 정의들이 무시되고 있는 것처럼 보인다.

잡동사니를 줄이는 한 가지 간단한 방법은 여기 설명서에서 설명한 대로 구성부품을 게으르게 적재할 수 있도록 하는 것이다. -> https://router.vuejs.org/guide/advanced/lazy-loading.html

이것을 실행하기 위해서 당신은 라우터 js의 수입문만 변경해야 할 것이고 다른 곳에서는 아무것도 변경할 필요가 없을 것이다.

만약 내가 바보 같은 예를 든다면:

import Foo from "@/src/views/Foo.vue";

될 것이다

const Foo = () => import('@/src/views/Foo.vue');

참조URL: https://stackoverflow.com/questions/55665782/how-to-prevent-vue-global-css-overwriting-itself-multiple-times