前面完成了项目结构的划分后，接着进行项目的 CSS 样式的重置
这里将包含两部分的重置：
normalize.css 样式重置库
在项目中安装依赖：
npm install normalize.css
在 main.ts 中导入，使得该样式库生效
import "normalize.css"
index.scss 样式出口
- index.scss 文件作为文件导出口
- common.scss 放置一些公共样式
- reset.scss 放置一些重置样式
- mixin.scss 一些样式混入
- variable.scss 全局变量文件
reset.scss
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul { padding: 0; margin: 0; } a { color: #333; text-decoration: none; } img { vertical-align: top; }
index.scss
@import './reset.scss'; // 注意是先进行代码的重置、这个导入在前 @import './common.scss'; // 公共样式 @import './mixin.scss'; // 样式混入 @import './variable.scss'; // 全局变量
最后在 main.ts 中导入
import './assets/css/index.scss' // 导入样式入口文件
项目引入SCSS
安装 scss
vue3 不需要再使用 node-sass
npm i sass sass-loader --save-dev # 安装至 开发依赖 即可
在 vite.config.js 中配置 scss 的全局变量
scss变量最好不要到单独的 .vue 文件里去使用，因此将 scss 的变量配置成全局的
import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import VueDevTools from 'vite-plugin-vue-devtools' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue(), VueDevTools()], resolve: { // resolve -> 解决一些路径问题 alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) // 在打包时将 @ 映射到 ./src } }, >>>>>>>>>>>>>>>> 引入 css: { // css预处理器 preprocessorOptions: { scss: { // 引入 variable.scss 这样就可以在全局中使用 variable.scss 中预定义的变量了 // 注意：给导入的路径最后加上 `;` additionalData: '@import "@/assets/css/variable.scss";' } } } <<<<<<<<<<<<<<<< 引入 })
