文章目录
-
- 前言
- 一、安装与使用
-
- 1.1 安装
- 1.2 scss 全局文件编写
-
- 1.2.1 概述
- 1.3 全局引入和配置
- 1.4 组件内使用
- vue2 项目引入 sass
- 附:忽略ts类型检测
前言
Sass 是世界上最成熟、最稳定、最强大的专业级CSS扩展语言!在日常项目开发过程中使用非常广泛,今天主要讲一下 Vite Vue3 项目中该如何全局引入 scss 文件,引入混合 mixin 文件的不同配置。
捎带说一下 Vue2 中的引入方式做一下简单的对比。
数字化管理平台
Vue3 Vite VueRouter Pinia Axios ElementPlus
权限系统-商城
个人博客地址
一、安装与使用
1.1 安装
vite 已经将 sass 预处理器的 loader 内置了,我们不用再像 webpack 项目中那样,需要下载和配置一堆相关的loader,我们只需要下载 sass 依赖,就能直接在项目中使用了:
# npm 方式
npm install -D sass
# yarn 方式
yarn add -D sass
# pnpm 方式
pnpm install sass
1.2 scss 全局文件编写
1.2.1 概述
如下图,src 目录下新建 styles 目录,并在目录中创建三个 scss 文件:
-
reset.scss 全局元素样式重置文件
主要用于清除 HTML 元素默认样式用,随便去一个大厂页面下 copy 一下就行/** *, *: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; }
-
global.scss 全局样式文件
引入 reset.scss 文件,并根据项目情况添加一些全局可使用的原子类@import url("./reset.scss"); // 边距 .m-b-30 { margin-bottom: 30px; } .m-l-5 { margin