【SCSS篇】Vite+Vue3项目全局引入scss文件

文章目录

    • 前言
    • 一、安装与使用
      • 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-left: 5px;
    }// 字体
    .font600 {font-weight: 600;
    }
  • mixin.scss 全局的混合 mixin 样式文件
    组件中经常会服用的多个属性整合到一起的,类似原子类

    // 定宽居中
    @mixin mo {width: 1280px;margin: 0 auto;
    }// 弹性盒弹性项上下居中
    @mixin flex {display: flex;align-items: center;
    }// 等级和地区样式
    @mixin level-and-area {display: flex;flex-wrap: wrap;margin: 10px 0;color: gray;dd {margin-right: 20px;margin-bottom: 16px;cursor: pointer;&:hover,&.active {color: #4993f2;}}
    }// 单行文本溢出显示 ...
    @mixin ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
    }
    

1.3 全局引入和配置

虽然上面三个都是 scss 文件,但是由于 mixin.scss 中定义的是混合文件,在 Vite 项目中引入时,区别于另外两个 scss 文件

  • 普通的 scss 样式文件全局引入
    在 main.ts 文件中直接使用 import 引入即可
import { createApp } from 'vue'
import App from '@/App.vue'// 引入全局样式文件
import '@/styles/global.scssconst app = createApp(App)
app.mount('#app')

这里,reset.scss 文件已在 global.scss 中引入。

  • mixin.scss 文件引入
    如果 mixin.scss 文件,像上面那样在 main.ts 中引入,则会引入失败,程序报错
    在这里插入图片描述
    也就是混合不能在 main.ts 中直接引入,这里需要在 vite.config.ts 中进行配置如下:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, './src')}},css: {preprocessorOptions: {// 这里配置 mixin.scss 混合文件的全局引入scss: {additionalData: `@import "@/styles/mixin.scss";`}}}
})

1.4 组件内使用

通过上面的配置,就可以在当前项目任一组件中使用声明的原子类和混合mixin了!

<script setup lang='ts'>
import { ref } from "vue";const levels = ref([{ level: "全部" },{ level: "三级甲等" },{ level: "三级乙等" },{ level: "二级甲等" },{ level: "二级乙等" },{ level: "一级" }
]);const cutIdx = ref(0);
</script>
<template><dl class="level"><dt class="m-b-30">等级:</dt><ddv-for="(item,index) in levels":key="index":class="index === cutIdx ? 'active' : ''">{{ item.level }}</dd></dl>
</template>
<style scoped lang='scss'>
.level {@include level-and-area;
}
</style>

vue2 项目引入 sass

  1. 下载安装一系列依赖
    首先,webpack 需要下载一大堆的东西:node-sass、sass-loader、style-loader、sass-resources-loader

    npm install node-sass --save-dev
    npm install sass-loader --save-dev
    npm install style-loader --save-dev  
    npm install sass-resources-loader --save-dev
    
  2. 配置 vue.config.js
    在 vue.config.js 中配置sass-resources-loader入口文件

    const {defineConfig
    } = require('@vue/cli-service');module.exports = defineConfig({transpileDependencies: true,devServer: {proxy: { //代理配置//...},chainWebpack: config => {// sass-resources-loader 公共样式文件配置,可全局使用变量const oneOfsMap = config.module.rule('scss').oneOfs.storeoneOfsMap.forEach(item => {item.use('sass-resources-loader').loader('sass-resources-loader').options({// 写入定义基础样式的scss文件路径resources: ['./src/assets/styles/common.scss']}).end()})},
    });
    
  3. 定义 scss 样式文件
    src/styles/global.scss 文件定义变量代码

    // 定义样式变量
    $html-root-font-size:14px
    $theme-color:gray
    
  4. 组件内使用

    //组件内使用
    <style lang="scss" scoped>//样式变量使用.more {color: $theme-color;font-size:$html-root-font-size;}
    </style>
    

附:忽略ts类型检测

  • 单行忽略 @ts-ignore

    async mounted(){let num:number = 10;//@ts-ignore let {arr,map}= await conf.fun();		
    }
    
  • 当前script内代码不需要ts校验 @ts-nocheck

    <script lang="ts">// @ts-nocheckimport {Vue,Watch,Options} from "vue-property-decorator";
    </script>
    
  • 取消忽略全文 // @ts-check

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/158293.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# Onnx Yolov8 Detect 涉黄检测

效果 项目 检测类别 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; usi…

蓝桥杯每日一题2023.10.14

年号字串 - 蓝桥云课 (lanqiao.cn) 题目描述 我们发现每个字母都与26紧密相关&#xff0c;其%26的位置就是最后一个字母&#xff0c;由于最开始将0做为了1故在写答案时需要注意细节问题 #include<bits/stdc.h> using namespace std; char s[] "ABCDEFGHIJKLMNOPQ…

Redis魔法:点燃分布式锁的奇妙实现

分布式锁是一种用于在分布式系统中控制对共享资源的访问的锁。它与传统的单机锁不同&#xff0c;因为它需要在多个节点之间协调以确保互斥访问。 本文将介绍什么是分布式锁&#xff0c;以及使用Redis实现分布式锁的几种方案。 一、前言 了解分布式锁之前&#xff0c;需要先了…

Linux CentOS8安装gitlab_ce步骤

1 下载安装包 wget --content-disposition https://packages.gitlab.com/gitlab/gitlab-ce/packages/el/8/gitlab-ce-15.0.2-ce.0.el8.x86_64.rpm/download.rpm2 安装gitlab yum install policycoreutils-python-utilsrpm -Uvh gitlab-ce-15.0.2-ce.0.el8.x86_64.rpm3 更新配…

CSS悬停卡片翻转明信片效果源码附注释

运行效果演示: HTML页面代码: <!DOCTYPE html> <html lang="en" > <head>

二十一、【文本工具组】

文章目录 横排文本工具字符选项卡段落文字 横排文本工具 需要注意的是一些不是免费的商业字体&#xff0c;一定不要拿去使用&#xff0c;否则后边很容易会受到法律索赔。 在制作海报等一些图形时&#xff0c;需要经常用到文本工具我们需要对文本进行变形&#xff0c;分段&…

【angular】实现简单的angular国际化(i18n)

文章目录 目标过程运行在TS中国际化参考 目标 实现简单的angular国际化。本博客实现中文版和法语版。 将Hello i18n!变为中文版&#xff1a;你好 i18n!或法语版:Bonjour l’i18n !。 过程 创建一个项目&#xff1a; ng new i18nDemo在集成终端中打开。 添加本地化包&#…

架构案例2017(五十二)

第5题 阅读以下关于Web系统架构设计的叙述&#xff0c;在答题纸上回答问题1至问题3.【说明】某电子商务企业因发展良好&#xff0c;客户量逐步增大&#xff0c;企业业务不断扩充&#xff0c;导致其原有的B2C商品交易平台己不能满足现有业务需求。因此&#xff0c;该企业委托某…

(vue3)大事记管理系统 文章管理页

[element-plus进阶] 文章列表渲染&#xff08;带搜索&到分页&#xff09; 表单架设&#xff1a;当前el-form标签配置一个inline属性&#xff0c;里面的元素就会在一行显示了 中英国际化处理&#xff1a;App.vue中el-config-provider标签包裹组件&#xff0c;意味着整个组…

NSSCTF做题(8)

[SWPUCTF 2022 新生赛]js_sign 看到了js代码 有一个base64编码&#xff0c;解密 最后发现这是一个加密方式 去掉空格之后得到了flag NSSCTF{youfindflagbytapcode} [MoeCTF 2022]baby_file 提示说有一个秘密看看你能不能找到 输入?filesecret 出现报错 输入php伪协议读取i…

【ROS】使用vscode浏览navigation2源码时,提示:没有那个文件或目录

1、问题描述 使用vscode浏览navigation2源码时,头文件下面有波浪线,并提示:没有那个文件或目录。比如没有:geometry_msgs/msg/polygon.h 错误信息: 无法打开源文件 “geometry_msgs/msg/polygon.h” (dependency of “nav2_controller/controller_server.hpp”)C/C++(16…

docker入门加实战—Docker镜像和Dockerfile语法

docker入门加实战—Docker镜像和Dockerfile语法 镜像 镜像就是包含了应用程序、程序运行的系统函数库、运行配置等文件的文件包。构建镜像的过程其实就是把上述文件打包的过程。 镜像结构 我们要从0部署一个Java应用&#xff0c;大概流程是这样&#xff1a; 准备Linux运行环…

【Rust】包和模块,文档注释,Rust格式化输出

文章目录 包和模块包 CrateRust 的标准目录结构 模块 Module用路径引用模块使用super引用模块使用self引用模块结构体和枚举的可见性 使用 use 引入模块及受限可见性基本引入方式绝对路径引入模块相对路径引入模块中的函数 避免同名引用 注释和文档文档注释包和模块级别的注释注…

自动化办公篇之python

1、如果没有安装xlwings库&#xff0c;先在控制台pip install xlwings,然后点击运行&#xff0c;创建四个空excel表 。 import xlwings as xw app xw.App(visibleTrue,add_bookFalse) for dept in ["技术部","销售部","运营部","财务部&q…

机器学习-有监督学习-神经网络

目录 线性模型分类与回归感知机模型激活函数维度诅咒过拟合和欠拟合正则数据增强数值稳定性神经网络大家族CNNRNNGNN&#xff08;图神经网络&#xff09;GAN 线性模型 向量版本 y ⟨ w , x ⟩ b y \langle w, x \rangle b y⟨w,x⟩b 分类与回归 懂得两者区别激活函数&a…

编译linux的设备树

使用make dtbs命令时 在arch/arm 的目录Makefile文件中有 boot : arch/arm/boot prepare 和scripts是空的 在文件scripts/Kbuild.include中 变量build : -f $(srctree)/scripts/Makefile.build obj 在顶层Makefile中 $(srctree)&#xff1a;. 展开后-f ./scripts/Mak…

C++-Mongoose(3)-http-server-https-restful

1.url 结构 2.http和 http-restful区别在于对于mg_tls_opts的赋值 2.1 http和https 区分 a) port地址 static const char *s_http_addr "http://0.0.0.0:8000"; // HTTP port static const char *s_https_addr "https://0.0.0.0:8443"; // HTTP…

虹科分享 | MACsec-先进的车载网络安全解决方案

方案概要 Media Access Control Security&#xff08;简称 MACsec&#xff09;是以太网上最先进的安全解决方案。它为以太网上传输的几乎所有帧提供完整性保护、重放保护和可选的机密性保护。与其他解决方案相比&#xff0c;包括了单播、组播和广播消息以及在第2层上运行的所有…

crontab报错/var/spool/cron : Permission denied和 -bash: chattr: command not found

crontab报错/var/spool/cron : Permission denied和 -bash: chattr: command not found 1、第一种情况2、第二种情况3、第三种情况 1、第一种情况 centos7下修改定时任务crontab -e的时候&#xff0c;控制台输出“crontab: installing new crontab”&#xff0c;表示任务添加成…

学习记忆——数学篇——案例——代数——不等式——一元二次不等式

重点记忆法 归类记忆法 解一元二次不等式的步骤 1.先化成标准型&#xff1a; a x 2 b x c > 0 ( 或 < 0 ) ax^2bxc>0(或<0) ax2bxc>0(或<0)&#xff0c;且a >0&#xff1b; 2.计算对应方程的判别式 △ △ △&#xff1b; 3.求对应方程的根&#xff1b…