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 단일 파일 구성 요소에서