왜 CSS는 'npm run dev'와 'npm run build'를 다르게 렌더링합니까?

왜 CSS는 'npm run dev'와 'npm run build'를 다르게 렌더링합니까?

vuetify(1.5.6)에 의존하는 심플한(약) VueJs(2.5.2) 앱을 사용하고 있습니다.프로젝트는 IntelliJ 경유로 Vue cli를 사용하여 작성되었기 때문에 표준 구조입니다.

앱에는 다음과 같은 범위 css를 가진 컴포넌트가 1개밖에 없습니다.

<style scoped>
 .app-stores{
  font-size: 12px;
  text-align: center;
 }

 .app-stores img{
  max-width: 190px;
 }  

 .padded-checkout-btn {
  padding: 10px;
 }
</style>

그리고 컴포넌트에 다음과 같이 사용합니다.

 <v-btn class="padded-checkout-btn" color="green lighten-1" :disabled="!isCheckoutable()" @click="progressStepper(2)">Checkout {{currencySymbol + toPrice(calculateTotal())}}</v-btn>

이제 내가 뛰면npm run dev로컬로 브라우저에 표시할 수 있습니다.패딩은 예상대로 표시됩니다.

하지만 내가 뛰면npm run build(코드 변경은 전혀 없습니다)그리고 사이트에 업로드 하면 패딩이 없어지는 것 같습니다.

빌드된 css파일을 확인해보니 있는 것 같습니다.

.padded-checkout-btn[data-v-dedb1744]{padding:10px}

그리고 결과 소스를 조사하면 다음과 같이 선언되어 있는 것을 알 수 있습니다.

<button data-v-dedb1744="" type="button" class="padded-checkout-btn v-btn theme--light green lighten-1"><div class="v-btn__content">Checkout £7.00</div></button>

질문:왜 다른 거죠?CSS가 숨겨져 있어도 개발 vs 빌드를 실행하는 목적은 모두 동일하다는 것입니까?진단/수정 방법에 대한 의견이 있습니까?

dev그리고.build는 다음과 같이 정의됩니다.

"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node build/build.js"
}

고쳤어. 나를 올바른 방향으로 인도해준 @Strelok 덕분이야.css가 적용되는 순서와 관련이 있습니다.선언을 다음으로 변경합니다.

.padded-checkout-btn {
  padding: 10px !important;
}

다른 모든 것에도 적용되도록 했다(내 생각엔...)

아직 개발 빌드에서는 동작하지만 빌드에서는 동작하지 않는 이유를 잘 모르겠습니다.

언급URL : https://stackoverflow.com/questions/55394047/why-does-css-render-differentlyt-between-npm-run-dev-vs-npm-run-build