vue3 项目集成sass，清除所有默认样式

前端小云儿

已于 2024-02-16 11:30:54 修改

阅读量735

点赞数

分类专栏： vue3知识点文章标签： sass 前端 css

于 2024-02-16 11:30:27 首次发布

本文链接：https://blog.youkuaiyun.com/jieweiwujie/article/details/136127029

版权

vue3知识点专栏收录该内容

88 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在Vue3项目中集成Sass，并详细讲述了清除所有默认项目样式的步骤，包括安装Sass、创建reset.scss文件、引入样式到index.scss以及在main.js中应用。此外，还提到了定义全局变量的方法。

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

1 安装sass

npm install sass --save-dev

2 测试应用

<script setup></script>

<template>
  <h1>
    这是组件A
    <div>这是div</div>
  </h1>
</template>
<style scoped lang="scss">
h1 {
  font-size: 20px;
  div {
    color: red;
  }
}
</style>

3 清除所有默认项目样式

新建一个reset.scss

*,
*:after,
*:before {
  box-sizing: border-box;

  outline: none;
}

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,
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,
t

了解本专栏