vue 通用样式被导入多次 vant 样式丢失不正常

积极的小可爱呀

于 2022-03-18 18:47:24 发布

阅读量2.2k

点赞数 1

分类专栏：配置环境啥啥啥文章标签： vue css webpack

本文链接：https://blog.youkuaiyun.com/qq_42266115/article/details/123581815

版权

配置环境啥啥啥专栏收录该内容

13 篇文章

订阅专栏

本文档记录了开发过程中遇到的样式重复导入导致的控制台警告，以及vant组件样式被reset.less覆盖的疑惑与解决方案。作者通过调整配置文件、分离样式资源并正确引入，成功解决了这两个问题，提高了项目的整洁性和效率。同时，作者反思了经验不足带来的困扰，并鼓励自我学习和进步。

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

问题

1：在看控制台的时候发现通用样式重复导入了
在这里插入图片描述
2：vant的样式有问题，好像vant的padding都没了

发生原因

最开始写的
在这里插入图片描述
我配置了通用样式，会自动导入一遍，然后我在app.vue中又导入了一遍，这样已经有重复导入了两遍了，然后配置的@base-color这些数据跟reset.less放在一起，这样导致重复引入第三遍。综上就是为啥看控制台会有那么多次重复引入样式的原因。
而vant的样式丢失，看控制台一个个注释样式发现是因为reset.less中的padding:0导致的，注释掉就好了，但是当时一直不知道为什么会发生这种情况。一直想着vant样的权重挺高的，怎么会被reset.less的样式覆盖呢？现在虽然解决的，但还是不知道为什么会发生这种情况。。。

解决

1：将@base-color这种配置专门放在一个文件里，不要和reset.less放在一起
2：在vue.config.js中配置，引入配置的样式

  'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, "./src/assets/css/base.less")] 
        }

3：在app.vue或者main.js中引入reset.less

<style lang="less">
@import './assets/css/reset.less';
</style>

结尾

也是自己技术不太好，会出现这种情况，多记录多学习，防止踩坑，加油！！！