时间戳

首页 > 解决方案 > 为什么 CSS 在 `npm run dev` 和 `npm run build` 之间呈现不同？

css - 为什么 CSS 在 `npm run dev` 和 `npm run build` 之间呈现不同？

问题描述

我有一个简单的（ish）VueJs（2.5.2）应用程序，它依赖于 vuetify（1.5.6）。项目是通过 IntelliJ 使用 Vue cli 创建的，因此它是一个标准结构。

应用程序中只有 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"
}

标签： cssvuejs2vuetify.js

解决方案

固定的。感谢@Strelok 将我推向正确的方向。这与应用 css 的顺序有关。将声明更改为：

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

确保它在其他所有事情之后应用（我猜......）

仍然不明白为什么它适用于 Dev build 而不是 prod build。

推荐阅读