集成Sass 及 全局样式配置

文件夹结构

如下面的结构所示，新建好相应文件夹结构：

project root/
    src/
    |-- styles/
        |-- index.scss
        |-- reset.scss

main.ts 中引入主入口样式文件

// main.ts
// ...
// 引入模板的全局样式
import '@/styles/index.scss'
// ...

index.scss 中引入重置样式文件

// index.scss
// 引入默认清除样式
@import './reset.scss'

npm 官网查找 reset.scss 相关代码

用现成的重置样式代码：

@namespace svg "http://www.w3.org/2000/svg";

*:where(:not(table, thead, tbody, tr, th, td, svg|*)) {
  all: unset;
  box-sizing: border-box;

  &::before,
  &::after {
    all: unset;
    box-sizing: border-box;
  }
}

div,
span,
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,
main,
button {
  font-size: 100%;
}

div,
main,
article,
aside,
details,
fieldset,
figcaption,
figure,
footer,
form,
header,
hgroup,
menu,
nav,
section,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre {
  display: block;
}

audio,
canvas,
video,
img,
picture,
svg {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

[hidden] {
  display: none;
}

head,
link,
meta,
script,
title,
template,
style {
  display: none;
}

a[href],
label[for],
select,
button {
  cursor: pointer;
}

/**
 * Table
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
}

table,
thead,
tbody,
tr,
th,
td {
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/**
 * Forms
 */
input {
  appearance: none;
  display: inline-block;
}

input[type="color"] {
  width: 15px;
  height: 15px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type="color"]::-webkit-color-swatch {
	border: none;
}

input:required,
input {
  box-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

input {
  &:focus {
    outline: none;
  }
}

variable.scss 全局变量文件

// variable.scss
project root/
    src/
    |-- styles/
        |-- index.scss
        |-- reset.scss
        |-- variable.scss  // 全局变量文件

vite.config.ts 中注册全局变量文件

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入路径相关依赖 使用命名导入：规避Nodejs 内置模块没有默认导出的问题
import * as path from 'path'
// 引入svg支持插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // svg 插件配置项
        createSvgIconsPlugin({
            // Specify the icon folder to be cached
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
            // Specify symbolId format
            symbolId: 'icon-[dir]-[name]',
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
        },
    },
    // 注册scss 的全局变量
    css: {
        preprocessorOptions: {
            scss: {
                javascriptEnabled: true,
                additionalData: `@import "./src/styles/variable.scss";`,
            },
        },
    },
})