小工具      在线工具  汉语词典  css  js  c++  java

vue配置scss全局样式

scss,前端 额外说明

收录于:40天前

  1. 安装插件
npm install sass --save-dev
  1. 在src文件夹下创建styles文件夹,并创建以下文件

在这里插入图片描述

  • index.scss: scss的入口文件
// 引入清除默认样式
@import './reset.scss';
  • reset.scss: 清除样式文件
/**
 * ENGINE
 * v0.2 | 20150615
 * License: none (public domain)
 */

*,
*: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,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    
  font: inherit;
  font-size: 100%;

  margin: 0;
  padding: 0;

  vertical-align: baseline;

  border: 0;
}

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

body {
    
  line-height: 1;
}

ol,
ul {
    
  list-style: none;
}

blockquote,
q {
    
  quotes: none;

  &:before,
  &:after {
    
    content: '';
    content: none;
  }
}

sub,
sup {
    
  font-size: 75%;
  line-height: 0;

  position: relative;

  vertical-align: baseline;
}

sup {
    
  top: -.5em;
}

sub {
    
  bottom: -.25em;
}

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

input,
textarea,
button {
    
  font-family: inhert;
  font-size: inherit;

  color: inherit;
}

select {
    
  text-indent: .01px;
  text-overflow: '';

  border: 0;
  border-radius: 0;

  -webkit-appearance: none;
  -moz-appearance: none;
}

select::-ms-expand {
    
  display: none;
}

code,
pre {
    
  font-family: monospace, monospace;
  font-size: 1em;
}
  • variable.scss:scss的全局变量
// 配置scss全局变量
$color:red
  1. mian.ts文件引入scss
import '@/styles/index.scss'
  1. 配置vite.config.ts文件
export default defineConfig({
  plugins: [
    vue()
  ],
  // scss全局变量配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnable: true,
        additionalData: '@import "./src/styles/variable.scss";'
      }
    }
  }
})
  1. 案例代码
<template>
  <div><h1>测试代码</h1></div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
div {
  h1 {
    color: $color;
  }
}
</style>
  • 由于引入了reset.scss清除样式,所以就没有h1的效果了,可以把reset.scss样式去掉感受效果
  • $color就是variable.scss中配置的全局变量
. . .

相关推荐

额外说明

如何创建 Spring Boot 项目

  如果有pom.xml有插件异常,可以先删除。 maven配置要配置好 然后yaml,再启动就行 server: port: 9991 spring: application: name: demo3 参考 如何创建 Spring B

额外说明

Oracle Database 23c 新特性表值构造函数

Oracle 23c 增强了 VALUES 子句的功能,它可以作为表值构造函数创建一组数据行(临时表),用于 SELECT、INSERT 以及 MERGE 语句。 这个新功能可以方便即席查询时精简代码,提高可读性。 示例表 我们首先创建一个简单的示例表:

额外说明

《MySQL入门教程》第22章窗口函数

文章目录 22.1 窗口函数概述 22.2 窗口函数的定义 22.2.1 分区选项(PARTITION BY) 22.2.2 排序选项(ORDER BY) 22.2.3 窗口选项(frame_clause) 22.2.4 命名窗口 22.3 常用窗口函数

额外说明

[Hello World] 二分查找笔记

活动地址:CSDN21天学习挑战赛 目录 一、介绍 1.1 定义 1.2 前提条件 1.3 原理 1.4 局限性 1.5 复杂度 二、代码示例 二、实践 一、介绍 1.1 定义 二分查找(Binary Search)也称折半查找,它是一种效率较高的查找方

额外说明

HNU-电路与电子学-小班3

第三次讨论 1 、直接用晶体管而不是逻辑门实现异或门,并解释这个电路是如何工作的。 (6个 MOS 管构成) 2 、通信双方约定采用 7 位海明码进行数据传输。请为发送方设计海明码校验位 生成电路,采用功能块和逻辑门为接收方设计海明码检错和纠错电路。 3

额外说明

npm中dependencies与devDependencies的区别

这个问题的出现是我下载npm包中的依赖文件安装错地方了,导致上线项目有问题,顺便一起来看看它们的区别。 一、前言 说白了就是当初学的时候太菜,没注意到它们的区别,也没去查明白。哈哈哈 二、dependencies与devDependencies的区别 你

额外说明

ActiveMQ实战(一) 下载与安装

官网:https://activemq.apache.org 一.下载 https://activemq.apache.org/components/classic/download/ 二.安装 这里我实践Linux下的安装,Linux版本为CentOS

额外说明

Java中去除字符串空格的几种方法

1、String.trim(): 它去掉的只是String首尾空格,内部不处理; 2、str.replace(" ", “”): 去掉所有空格,包括首尾、中间,但是又仅仅局限于一个空格 3、str.replaceAll(" +","") : 可以匹配去掉

额外说明

turf:使用

一、官网 中文 英文 二、安装 npm install @turf/turf 三、引入 全部引入(Vue中) import * as turf from '@turf/turf' 也可以使用<script> 标签引入 <script src="libs/

额外说明

拼多多系统化课程,新系列课专业运营给你店铺出运营方向

标题:《打造高效店铺运营,掌握拼多多专业运营技巧》 随着电商行业竞争日趋激烈,拼多多已成为不可忽视的平台。然而,作为新手,如何在拼多多上开一家高效的店铺,并提高销量和曝光度,是每个商家都关心的问题。通过《拼多多系统课程,全新系列专业运营课程为您指明店铺运

ads via 小工具