为什么我的前端代码在本地和生产环境中的行为不同？

Question

目前我只有一个 BootstrapVue VueJS 前端项目，我有 4 张扑克牌，我理想情况下希望将它们保留在一行/行上（就像在本地一样），但是当我在生产中查看它时（使用 Heroku，如果它制作了一个不同之处）

目前的代码如下：

    <div 
        flex-wrap="nowrap" 
        class="row d-flex nowrap mt-3" 
        justify-content="space-between" 
        width="100vw"
    >
        <b-container>
            <b-row>
                <b-col>
                    <PlayingCard/>
                </b-col>
                ....etc for the other cards....
             </b-row>
        </b-container>
    </div>

我玩过很多不同的类和合理内容以及所有这些东西，但不断得到不同的本地与产品结果。我可以确认 Heroku 上的代码是最新的，因为它会在每次新提交时重新部署，并且自从尝试修复此样式问题以来我添加了一些新功能，并且这些功能正确显示。

Answer 1

此类样式问题最常见的原因是 CSS 的范围问题。如果您在本地检查该元素，您可能会看到仅应用了本地样式，而如果您检查生产中的元素，您将看到选择器包含更多 CSS（由于两个不同组件中的相同选择器），或者另一个选择器被完全应用。

您遇到这个问题是因为在开发模式下它只加载您正在查看的组件的 CSS。在生产模式下，所有组件的所有 CSS 都会组合在一起。

要解决该问题，您有多种选择：

1. scoped您可以在样式标签上使用该属性。Vue 会自动在您的组件上添加数据属性，并使用该数据属性来确定样式范围。这通常不适用于诸如弹出窗口之类的内容，这些内容已移出原来的位置。

<template>
  <div>
    <!-- something here -->
  </div>
</template>

<script>
export default {
  //...
}
</script>

<style scoped>
button {
  // This only styles the buttons in this component, rather than every button in the application
}
</style>

2. 如果您还需要设置子组件的样式，则可以在根元素上使用一个类，并设置与之相关的所有内容的样式。您需要在应用程序中使该类成为唯一的名称，但如果您只使用组件的名称，那应该不是问题。

<template>
  <div class="comp-card">
    <!-- something here -->
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

<style lang="scss">
.comp-card {
  button {
    // All buttons that are descendants of our component are now styled.
  }
}
</style>