vue打包后样式错乱

飘雪无垠

于 2019-02-12 13:32:10 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue build

本文链接：https://blog.youkuaiyun.com/qq_41746329/article/details/87083965

本文探讨了使用Vue.js开发过程中，遇到的样式未正确应用的问题。通过对比开发环境与生产环境的差异，发现组件样式未生效的情况，并给出了在style标签中使用scoped属性解决该问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于vue-cli脚手架构建的项目，可通过npm run build把项目打包为静态文件。

打包后serve -s dist却发现页面与之前开发时的样式不同。

通过谷歌console调试，发现是组件内部的样式没有生效：

</template>

<style>
.active i,
.active label {
    color: #f60;
}
.iconfont {
    background: none;
    padding-left: 10px;
    padding-top: 6px;
    font-size: 30px;
    margin: 0px;
    height: 30px;
    width: 70px;
}
.text-nav {
    font-size: 5px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
</style>

此时，在组件的style 标签内加上scoped 再打包，发现与开发时样式一致。