>

이것이 vue 로더에만 해당되는지 또는 webpack 빌드에 더 일반적인 것인지 확실하지 않습니다.

부트 스트랩 4가로드 된 간단한 HTML 페이지가 있고 두 개의 버튼을 추가 한 경우 :

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

여백이 없더라도 작은 간격으로 렌더링됩니다 :

그러나 최신 버전 Vue 앱에 동일한 버튼을 추가하면 버튼 사이에 간격이 없습니다. 기본 설정을 사용하여 vue-cli를 사용하여 프로젝트를 생성하고 부트 스트랩 npm 패키지를 설치 한 다음 가져 와서 루트 구성 요소에 두 개의 버튼을 추가하여이를 쉽게 다시 작성할 수 있습니다.

이것은 vue-cli가 아닌 webpack 템플릿을 사용할 때 발생하지 않았으므로 vue-cli가 설정하는 기본 webpack 구성이 어떻게 든이 원인이라고 생각합니다.

이전 동작이 복원되도록 webpack 구성에 적용 할 수있는 재정의를 아는 사람이 있습니까? 이렇게하면 다른 버튼 옆에있는 모든 버튼에 여백을 추가하지 않아도됩니다.

여백 설정이 없어도 버튼 사이의 간격이 정확히 어떻게 정확한지에 대한 의견은 해결책을 찾는 데 도움이 될 수 있습니다.

  • 답변 # 1

    테리의 의견에 감사합니다. 이것이 공백 문제라는 것을 알았습니다.

    해결책은 preserveWhitespace 를 재정의하는 것입니다.   vue-loader 의 컴파일러 옵션 false 로 설정되어 있습니다.  기본적으로.vue.config.js에 다음을 추가하면됩니다 :

    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                options.compilerOptions.preserveWhitespace = true
                return options
            })
    }
    
    

관련 자료

  • 이전 각도 7에서 멀티 링크에 매개 변수를 통해 하나의 구성 요소를 사용하는 방법이 있습니까?
  • 다음 reporting services - 왼쪽과 오른쪽에 행당 2 개의 레코드가 가능하도록 레코드를 어떻게 반복 할 수 있습니까?