vue-cli3 패키징 스타일 정렬 불량

프런트 엔드 개발에서 Vue.js가 널리 사용됨에 따라 많은 개발자가 Vue CLI 3을 사용하여 Vue 프로젝트를 관리하고 Webpack을 사용하여 프로덕션 환경용 프로젝트를 패키징하기 시작했습니다. 그러나 Vue CLI 3 패키징을 사용할 때 스타일 정렬 문제가 발생할 수 있습니다. 이 기사에서는 이러한 문제를 해결하는 방법을 살펴보겠습니다.

1. 종속성 버전 확인

Vue CLI 3 및 Webpack으로 패키징할 때 모든 종속성 버전이 최신이고 Vue CLI 요구 사항보다 낮지 않은지 확인하세요.

vue --version

명령을 사용하여 Vue CLI 버전을 확인할 수 있으며 설치된 버전이 3.x.x인지 확인하세요.

동시에 npm 또는 Yarn을 사용하여 종속성을 설치할 때는 최신 버전의 패키지, 특히 sass-loader, css-loader 등과 같은 CSS 및 스타일과 관련된 패키지를 사용해야 합니다.

2. CSS 전처리기 구성 확인

Vue CLI 3에서는 기본적으로 scss를 CSS 전처리기로 사용합니다. less 또는 stylus와 같은 다른 CSS 전처리기를 사용하고 프로젝트 구성에서 올바르게 설정되지 않은 경우 스타일이 잘못 정렬될 수 있습니다. 따라서 vue.config.js 파일에서 CSS 전처리기를 올바르게 구성했는지 확인하십시오. 예:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 使用less的变量
        modifyVars: {
          // 或者您想使用jQuery和Bootstrap等的cdn链接
          'jquery':'jquery',
          'moment':'moment',
          'i18n':'vue-i18n',
          'bootstrap':'https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css',
        }
      }
    }
  }
}

이 예에서는 less라는 옵션을 추가하고 수정Vars를 사용하여 Less 변수를 구성 요소 파일에 전달했습니다. Vue CLI 3에서 CSS 전처리기를 올바르게 구성하면 스타일 정렬 문제를 해결할 수 있습니다.

3. 글로벌 스타일 사용 여부 확인

Vue 프로젝트에서는 글로벌 스타일을 사용하여 컴포넌트에 적용할 수 있습니다. 전역 스타일에서 자체 CSS 선택기를 사용하면 Vue 구성 요소가 CSS 선택기가 정의된 DOM 요소에 포함될 수 있으므로 스타일 정렬 문제가 발생할 수 있습니다.

이 문제를 해결하기 위해 CSS 범위 지정을 사용하여 구성 요소의 스타일을 제한할 수 있습니다. 이를 위해 Vue 단일 파일 구성 요소에서 c24b9cba2f4a694018a6ac4d62a65780 태그를 사용하여 CSS 스타일이 현재 구성 요소에만 적용되도록 제한할 수 있습니다.

<template>
  <div>
    // ...
  </div>
</template>

<script>
// ...
</script>

<style scoped>
  /* 在这里定义组件的样式 */
</style>

범위가 지정된 태그를 통해 스타일을 선언하면 현재 구성 요소 내에서 사용이 제한되므로 전역 스타일 오염이나 다른 요소에 의해 구성 요소 스타일이 도입되는 것을 방지할 수 있습니다.

4. 선택기 우선순위 충돌이 있는지 확인하세요

Vue CLI 3으로 패키징할 때 일부 CSS 선택기가 항상 다른 선택기에 의해 재정의되어 스타일이 잘못 정렬될 수 있음을 알 수 있습니다.

이는 일반적으로 선택기 우선순위 충돌로 인해 발생합니다. Vue 구성 요소에서 우선 순위는 다음 요소에 따라 결정됩니다.

a) 요소 선택기 < 클래스 선택기 < 인라인 스타일

b) 동일한 선택기를 사용하는 규칙, 나중에 선언된 재정의가 먼저 선언됩니다. 동일한 우선순위를 가진 Vue 구성 요소에서 동일한 선택기를 사용하는 경우 나중에 정의된 선택기가 먼저 정의된 선택기를 재정의합니다.

이 문제를 해결하기 위해 보다 구체적인 CSS 선택기를 사용하여 우선순위를 높이고 다른 선택기에 의해 쉽게 재정의되지 않도록 할 수 있습니다.

다른 CSS 충돌이 있는지 확인하세요

5. 마지막으로 Vue 프로젝트가 다른 CSS 파일과 충돌하는지 확인해야 합니다. 이는 구성 요소에서 사용하는 CSS 규칙이 다른 파일의 규칙과 충돌하여 발생할 수 있습니다.

이를 방지하기 위해 CSS 규칙에서 보다 구체적인 선택기를 사용할 수 있습니다. BEM(Block Element Modifier) ​​또는 ITCSS(Extensible Composable CSS Classes)와 같은 다양한 CSS 명명 규칙을 사용해 볼 수도 있습니다.

동시에 충돌을 피하기 위해 범위가 지정된 스타일을 사용하여 구성 요소에 스타일을 채우거나 CSS 모듈 또는 스타일 구성 요소와 같은 JS 솔루션에서 CSS를 사용할 수 있습니다.

요약:

위는 종속성 버전 확인, CSS 전처리기 구성 확인, 전역 스타일 사용, 선택기 우선 순위 충돌 확인 및 기타 CSS 충돌 확인을 통해 Vue CLI 3 패키징의 스타일 불일치를 해결하는 방법입니다. 이러한 방법은 다른 웹 애플리케이션의 Webpack 패키징과 관련된 스타일 문제에도 적용될 수 있습니다. 이러한 방법이 개발 과정에서 유사한 문제를 해결하는 데 도움이 되기를 바랍니다.

위 내용은 vue-cli3 패키징 스타일 정렬 불량의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!