У меня есть простое (ish) приложение 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 против сборки в том, что они одинаковы? Любые идеи относительно того, как диагностировать / исправить?
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"
}