Блог

У меня есть простое приложение VueJS (2.5.2) с зависимостью от vuetify (1.5.6). Проект был создан с использованием Vue cli через IntelliJ, так что это стандартная структура.

В приложении есть только 1 компонент с css-областью, подобной этой:

 <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 скрыт, весь смысл запуска dev против build в том, что они одинаковы? Есть идеи относительно того, как диагностировать / исправить?

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;
}
  

убедитесь, что он был применен после всего остального (я думаю …)

Все еще не совсем понимаю, почему это работает на Dev build, а не на prod build.