vue scss样式初始化

1、新建文件

在这里插入图片描述

// @ 2017/11/2
// 初始化样式表
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,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
button,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
   
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  // color: rgba(0, 0, 0, .84);
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  // font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  // font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
  // -moz-user-select: none;
  // -webkit-user-select: none;
  // user-select:auto;
}

body {
   
  font-size: 12px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
   
  display: block;
}

ol,
ul {
   
  list-style: none;
}

button {
   
  background: transparent;
}

blockquote,
q {
   
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
   
  content: '';
  content: none;
}

strong {
   
  font-weight: bold;
}

table {
   
  border-collapse: collapse;
  border-spacing: 0;
}

img {
   
  border: 0;
  max-width: 100%;
}

html {
   
  line-height: initial;
}
// ::-webkit-media-controls {
   
//   display: none !important;
// }

// ::-webkit-scrollbar {
   
//   display:none;
//   width: 8px;
// }
// ::-webkit-scrollbar-thumb {
   
//   background-color: #c1c1c1;
//   border-radius: 4px;
// }

2、引入到main.js文件中

import "@/style/Reset.scss";

3、扩展

1.css reset:这个是我们在做项目时比较常用的一套css初始化样式,在这里就直接给出代码了

html, body, div, span, applet
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
对于Vue 3和Vite项目,你可以按照以下步骤安装和使用SCSS: 1. 创建新的Vue项目: 使用Vue CLI创建新的Vue项目,确保你已经安装了Vue CLI。打开终端并运行以下命令: ``` vue create my-vue-project ``` 按照提示选择配置选项并等待项目创建完成。 2. 进入项目目录: 打开终端,进入你的项目目录: ``` cd my-vue-project ``` 3. 安装Vite: 由于你想使用Vite作为开发服务器,需要在项目中安装Vite。运行以下命令进行安装: ``` npm install --save-dev create-vite ``` 4. 初始化Vite配置: 运行以下命令初始化Vite配置文件: ``` npx create-vite ``` 根据提示选择配置选项并等待配置文件生成。 5. 安装SCSS支持: 运行以下命令安装SCSS支持的相关依赖: ``` npm install --save-dev sass ``` 6. 配置Vite以使用SCSS: 在项目根目录下找到 `vite.config.js` 文件,并添加以下内容: ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue(), ], css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";`, }, }, }, }) ``` 7. 创建SCSS文件: 在你的项目中创建一个 `styles` 目录,在该目录下创建一个 `variables.scss` 文件,用于存放你的SCSS变量和样式。 8. 在组件中使用SCSS: 在你的Vue组件中,可以直接导入和使用SCSS文件。例如,在你的组件中添加以下代码: ```vue <style lang="scss"> @import "@/styles/variables.scss"; .my-component { color: $primary-color; } </style> ``` 现在你已经成功安装并配置了Vue 3和Vite项目中的SCSS。你可以开始在你的项目中使用SCSS编写样式了!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

都挺好,刚刚好

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

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

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

打赏作者

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

抵扣说明:

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

余额充值