VUE의 내보내기 기본값 스타일을 구성하는 방법

vue 에서

로 구성 요소 스타일을 구성하는이 질문은 vue 구성 요소의 export default 객체 내의

이 예에서는

내의 태그에는 응용 프로그램의 다른 곳에 적용되는 다른 스타일에 관계없이 항상 파란색 텍스트가 있습니다. 여러 스타일의 블록을 포함 할 수 있지만 export default style export default

export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `,
  style: `
    p {
      color: blue;
    }
  `
};

p MyComponent scoped 를 사용하여 VUE 구성 요소 내에서 CSS 스타일을 스코핑하는 CSS 스타일을 스코핑 할 수 있습니다. 를 사용하여 vue 구성 요소 내에서 CSS 스타일을 범위로 삼으십시오. 이 속성은 구성 요소의 루트 요소에 고유 한 속성을 자동으로 추가하여 스타일이 해당 구성 요소 인스턴스에만 적용되도록합니다. 이것은 스타일 충돌을 방지하고 더 나은 CSS 조직을 촉진합니다.

export default 이것은 다음과 같습니다.

태그 내에서 브라우저는 구성 요소의 루트 요소와 그 자녀에 고유 한 속성 (일반적으로 와 같은 데이터 속성)을 자동으로 추가합니다. CSS 선택기는 해당 특정 속성을 가진 요소 만 대상으로합니다. 이것은 스타일링 구성 요소가 캡슐화를 유지하고 충돌을 방지하기위한 권장되는 접근법입니다.

export default scoped style

: 를 사용할 때 vue 구성 요소를 스타일링하는 몇 가지 방법이 있습니다.

1. 위에 표시된대로 이것은 가장 간단한 방법입니다. 스타일을 구성 요소의 정의 내에서 직접 유지합니다. 속성을 ​​사용하면 스타일이 구성 요소로 제한되도록합니다. style 외부 스타일 시트 (Unscoped) : 는 외부 CSS 파일을 가져 와서 전 세계적으로 스타일을 적용 할 수 있습니다. 이는 여러 구성 요소 또는 전체 응용 프로그램에 적용 해야하는 스타일에 유용합니다. 이 접근법을 사용하려면 구성 요소에서 스타일을 가져 오는 것이 필요합니다. 일반적으로 메인 애플리케이션 파일에서 scoped 태그를 사용하거나 웹 팩과 같은 모듈 Bundler를 사용하는 경우 구성 요소의 스크립트 섹션 내에서 가져 오기 명령문을 사용해야합니다. 이 메소드 는 . CSS 모듈을 구성 요소로 가져 오면 생성 된 클래스 이름을 통해 스타일이 자동으로 스코핑됩니다. 이 방법 는 . 그런 다음 컴파일 된 CSS는
2. 옵션 내에서 사용하거나 외부 스타일 시트로 가져올 수 있습니다. 예 프리 프로세서 (Sass, Less)를 사용하여 예, vue 구성 요소의 스타일 섹션에서 Sass와 같은 사전 프로세서를 사용할 수 있습니다. 그러나 애플리케이션이 실행되기 전에 SASS 이하의 파일 또는 적은 파일을 CSS로 사전 처리하도록 구성된 빌드 프로세스 (Webpack 또는 Vite)가 필요합니다. 예를 들어, SASS를 사용하는 경우 일반적으로 스타일을 파일 (예 : )으로 작성하면 CSS에 스타일을 작성할 수 있습니다. 그런 다음 VUE 구성 요소의 <link> SASS를 사용하여 예제 (적절한 웹 팩/vite가 필요합니다. configuration) : mycomponent.scss : style export default
mycomponent.vue :
3. 태그의 속성은 빌드 프로세스를 SASS 프리 프로세서를 사용하도록 지시합니다. 명령문은 에서 컴파일 된 CSS를 가져옵니다. 이 설정을 위해서는 SASS 이하의 파일을 올바르게 처리하도록 빌드 프로세스를 구성해야합니다. 적절한 구성이 없으면 사전 프로세서 코드가 컴파일되지 않으며 오류로 이어집니다.

위 내용은 VUE의 내보내기 기본값 스타일을 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!