Vue3集成scss实现清除浏览器默认样式

最新推荐文章于 2025-04-25 16:12:56 发布
最新推荐文章于 2025-04-25 16:12:56 发布
阅读量1.9k 收藏 9
点赞数 6
分类专栏： web 文章标签： scss 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_59244784/article/details/135398941
版权
本文介绍了如何从npm获取reset.scss文件，将其复制到本地并创建index.scss进行导入，最终在main.ts中引入实现清除浏览器默认样式的全局应用过程。

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

1.首先去npm官网找到对应的reset.scss文件，复制内容在本地src下style建一个一模一样的文件，内容复制进去npm | Home

2.在style文件夹下再建一个index.scss文件，在它里边引入刚刚建好的reset.scss文件，如下

@import './reset.scss';

3.在main.ts中引入该文件，就可以让清除浏览器样式全局生效

 import '@/styles/index.scss'

 

vue3 项目集成sass，清除所有默认样式
jieweiwujie的博客
02-16 746
然后引入到 index.scss。新建一个reset.scss。然后在引入 最下面css部分。最后，在main.js引入。3 清除所有默认项目样式。
vite+vue3+ts 从0教你创建一个vue3项目 (pnpm)
许小叮当的博客
12-29 1186
本文介绍了如何使用Vite创建Vue3项目，涵盖了从安装Vue3、配置less/scss、到安装Vue Router、Pinia状态管理、axios的过程。还讲解了如何添加Element Plus组件库，以及Echarts的集成。
css样式重置
bacaojuan5114的博客
05-24 555
/* 清除内外边距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fiel...
清除浏览器默认样式-vue3的H5项目从0到1工程化落地经验篇3
最新发布
王月Lydia的博客
04-25 576
因为它除了重置样式，还是目前最流行的，有很多定义好的类名直接就能用，（虽然对我来说是反而还得记一堆新的tailwind类名，毕竟我的css属性几乎已经都会背，但是还是看在它能响应式的份上使用它了，写几个页面其实就掌握的差不多了）。版本呢，使用了目前的最新版本4.x. 最新版本和旧版本的导入方式不同，大家看官方文档就好了。这是vue3的H5项目从0到1工程化落地经验的第3篇，有了这个系列你可以从0创建一个自己的h5项目，并且里边涉及到的常用的点都会包含到。
vue项目清除标签默认样式
果栋的博客
11-14 1024
2. 在main.js中全局引入样式。-css (下载插件)
Vue3去除body默认样式，去除白边
2301_80272947的博客
04-18 1349
在项目src目录下新建styles文件夹，在styles下新建reset.scss 的文件将下面的代码复制进去。然后在 项目根目录找到index.html，在里面添加代码。在进行Vue3搭建时，默认样式会出现白边。
关于vue清除默认样式&scoped
hlonelier的博客
07-06 4505
父组件有`scoped`属性，子组件无，父组件也无法设置子组件样式，因为父组件的所有标签都会带有data-v-469af010唯一标志，但子组件不会带有这个唯一标志属性，与1同理，虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件。总之，`scoped` 样式是 Vue 提供的一种实现组件样式局部化的机制，它可以确保组件样式的隔离和可维护性，使样式的影响范围局限在组件内部，不会对其他组件或全局样式产生冲突。这意味着选择器的特殊性可能会改变，你可能需要使用更具体的选择器来覆盖全局样式。
CSS reset样式重置
demonHunter1234的博客
12-01 596
我们总能看见这样的重置样式： 1 *{ 2 padding:0; 3 margin: 0; 4 } 强烈不推荐！！！ 推荐重置样式示例：部分内容可进行相应调整！ 1 /* reset */ 2 html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figu...
vite+ts+vue3项目初始化 -- eslint+prettier代码格式化
weixin_43993776的博客
08-29 1854
【代码】vite+ts+vue3项目初始化。
Vue2测试
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
07-14 1067
Vue2测试
Bootstrap Table样式定制秘笈：深入SCSS与LESS打造个性化样式
本文旨在详细介绍Bootstrap Table的定制需求、SCSS与LESS的基本和高级特性，并展示如何将这些技术应用于Bootstrap Table的定制中。通过对SCSS和LESS的深入理解，包括它们的区别、原理及其在Bootstrap Table中的具体...
CSS重置样式清除浏览器默认样式
04-15
CSS重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）。
css 清除默认样式
11-27
清除html原有样式清除html原有样式清除html原有样式清除html原有样式
css 清除浏览器默认样式
04-14
/* reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}a img {border:none;} /* container,clearfix */ .container:after, .clearfix:after {clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}.container, .clearfix {display:inline-block;}* html .container,* html .clearfix {height:1%;}.container, .clearfix {display:block;}
vue3 新建 项目 清除 默认样式
weixin_54397440的博客
12-24 1274
到 npm 官网 里 搜索。新建 清除默认样式文件夹。
vue清除css全局默认样式插件
m0_51354601的博客
04-13 4686
【代码】vue清除css全局默认样式插件。
Vue清除默认样式插件
D_ylong的博客
11-01 1249
1. npm i reset-css (下载清除默认样式插件) 2. 在main.js中全局引入样式 import 'reset-css'
scss - 清除默认样式
m0_64378190的博客
03-06 1862
scss 清除默认样式文件，并进行全局引入。
CSS清除浏览器默认样式
热门推荐
我是菜鸡
03-06 1万+
上图我们可以看出虽然我对div和p没设置任何外边距内边距，但是他们之间还是会出现间隔。这是因为浏览器给他们设置了默认的边距。设置了默认值不要紧，但是不同浏览器会设定不同的默认值，这种默认样式在开发中会造成影响，因此我们要将其去除，使页面中的样式在所有浏览器中显示效果都相同。本文给出三种对策。 可以下载我提供的文件，引入即刻生效。我在文章末尾给出了源码，也可以直接复制使用。 *通配选择器简单处理 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

EntyIU

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值