Vite+Vue3项目全局引入scss文件

前言

Sass 是世界上最成熟、最稳定、最强大的专业级CSS扩展语言!在日常项目开发过程中使用非常广泛,今天主要讲一下 Vite+Vue3 项目中该如何全局引入 scss 文件,引入混合 mixin 文件的不同配置。捎带说一下 Vue2 中的引入方式做一下简单的对比。

一、安装与使用

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. 1. 下载安装一系列依赖 首先,webpack 需要下载一大堆的东西:node-sass、sass-loader、style-loader、sass-resources-loadernpm 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. 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.store
        oneOfsMap.forEach(item => {
          item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
              // 写入定义基础样式的scss文件路径
              resources: [
                './src/assets/styles/common.scss'
              ]
            })
            .end()
        })
      },
    });

  3. 3. 定义 scss 样式文件 src/styles/global.scss 文件定义变量代码// 定义样式变量
    $html-root-font-size:14px
    $theme-color:gray

  4. 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-nocheck
        import {
            Vue,
            Watch,
            Options
        } from "vue-property-decorator";
    </script>

  • • 取消忽略全文 // @ts-check

收录于合集 #Vue

 16个

上一篇前端重新部署如何通知用户刷新网页?

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

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

相关文章

【linux】安装rpmrebuild

rpmrebuild是一种从已经安装的包中构建RPM文件的工具。它可以用于轻松构建修改后的包&#xff0c;并适用于任何使用RPM的Linux发行版。 访问地址 rpm rebuild download | SourceForge.net 选择版本 版本地址&#xff1a;版本地址 下载安装包 安装 rpm -ivh rpmrebuild-2.15…

2023大湾区杯粤港澳金融数学建模竞赛思路+模型+代码

目录 一.思路模型见文末名片&#xff0c;比赛开始第一时间更新 二.大湾区杯常用算法之主成分分析法(PCA) 三.MATLAB代码 四.国赛建模思路获取见此 一.思路模型见文末名片&#xff0c;比赛开始第一时间更新 二.大湾区杯常用算法之主成分分析法(PCA) 主成分分析法(PCA)是一种…

人工智能轨道交通行业周刊-第64期(2023.10.16-10.29)

本期关键词&#xff1a;北斗应用、供电智能运维、5G-R、铁路职称、星火大模型 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通RailMetro轨道世界铁路那…

集合总结(Java)

Collection 常用方法 package com.test01;import java.util.ArrayList; import java.util.Collection; /*添加元素---boolean add(E e);移除元素---boolean remove(Object c);判断元素是否存在---boolean contains(Object c);*/ public class S {public static void main(Str…

关于多个elementui的cascader级联组件页面滚动渲染样式导致卡顿问题

如题&#xff0c;多个cascader级联组件&#xff0c;下拉选项含大量数据&#xff0c;滚动时会有实时样式重新渲染&#xff0c;导致CUP内存溢满而卡顿 小优化技巧&#xff1a;可加loading一次性加载完多个cascader级联组件后再允许页面滚动。 方法一&#xff1a;使用elementui中…

【2023.10.25练习】数据库-函数2

任务描述 本关任务&#xff1a;编写函数fun_2&#xff0c;实现指定学生的GPA计算。输入参数为学号&#xff0c;函数返回值为该生的GPA。 编程要求 在代码文件“step3/query1.sql”中实现函数fun_2&#xff1b; 在代码文件“step3/query2.sql”中实现在select命令中调用函数f…

LeetCode 917 仅仅反转字母 简单

题目 - 点击直达 1. XXXXX1. 917 仅仅反转字母 简单1. 原题链接2. 题目要求3. 基础框架 2. 解题思路1. 思路分析2. 时间复杂度3. 代码实现 1. XXXXX 1. 917 仅仅反转字母 简单 给你一个字符串 s &#xff0c;根据下述规则反转字符串&#xff1a; 所有非英文字母保留在原有位置…

【计算机网络】认识协议

目录 一、应用层二、协议三、序列化和反序列化 一、应用层 之前的socket编程&#xff0c;都是在通过系统调用层面&#xff0c;如今我们来向上打通计算机网络。认识应用层的协议和序列化与反序列化 我们程序员写的一个个解决我们实际问题, 满足我们日常需求的网络程序, 都是在应…

如何快速解决d3dcompiler_43.dll缺失问题?五种方法快速解决

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“D3DCompiler_43.dll缺失”。这个错误通常会导致游戏、应用程序或系统无法正常运行。为了解决这个问题&#xff0c;我们需要采取一些修复方案来恢复缺失的文件。本文将介绍五个修复D3DCompi…

百度超级链XuperChain使用JavaSDK接入

环境 &#xff1a; ubuntu20 xuperchain 5.3 go 1.17 springboot : 2.5.14 前言 请提前启动好xchain的节点&#xff0c;我选择简单启一个xchain节点作为测试&#xff0c;并且使用默认端口37101 SpringBoot项目初始化 我们先进行SpringBoot项目的配置进行讲解&#xff0c;这里…

mongodb数据迁移的方法

这个方法只能将数据从一个mongo数据库转移到另一个mongo数据库 这个命令可以备份mongo数据&#xff08;mongo数据库中的数据备份转换为文件&#xff09; mongodump --host HOST --port PORT --username USERNAME --password PASSWORD --db DB -c COLLECTION --out OUT这个命令…

Flutter的The file name ‘xxxx.dart‘ isn‘t a snake_case identifier警告

文章目录 警告原因分析解决方法dart的一些命名规则变量和函数命名&#xff1a;类和类型命名&#xff1a;常量和枚举&#xff1a;文件命名&#xff1a;包命名&#xff1a;注释&#xff1a;命名一致性&#xff1a;避免缩写&#xff1a;可搜索的命名&#xff1a; 一些好习惯 警告 …

C++不能在子类中构造函数的初始化成员列表中直接初始化基类成员变量

在C中&#xff0c;派生类的构造函数可以调用基类的构造函数来初始化基类的成员变量。但是无法在派生类的构造函数的初始化列表中直接初始化基类的成员变量。 如果那样做&#xff0c;会报错&#xff1a;xx不是类xx的非静态成员或基类 例子 class StatusBase{ public:~StatusBas…

[已解决]安装的明明是pytorch-gpu,但是condalist却显示cpu版本,而且torch.cuda.is_available 也是flase

问题; 安装了gpu版本的pytorch&#xff0c;但是显示的torch.cuda.is_available(&#xff09;却是flase。 conda list查看 版本显示只有cpuonly 在网上找了半天&#xff0c;也没有解决办法。 仔细看了一下&#xff0c;发现&#xff0c;有个单独的包叫cpuonly&#xff0c;不知道…

33基于MATLAB的对RGB图像实现中值滤波,均值滤波,维纳滤波。程序已通过调试,可直接运行。

基于MATLAB的对RGB图像实现中值滤波&#xff0c;均值滤波&#xff0c;维纳滤波。程序已通过调试&#xff0c;可直接运行。 33 MATLAB、图像处理、维纳滤波 (xiaohongshu.com)

linux入门---多线程的控制

目录标题 线程库pthread_create如何一次性创建多个线程线程的终止线程的等待线程取消分离线程如何看待其他语言支持的多线程线程id的本质线程的局部存储线程的封装 线程库 要想控制线程就得使用原生线程库也可以将其称为pthread库&#xff0c;这个库是遵守posix标准的&#xf…

小美的修路(最小生成树练习)

本题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 题目&#xff1a; 样例&#xff1a; 输入 3 4 1 2 3 1 1 2 2 0 1 3 1 0 2 3 3 0 输出 2 1 3 思路&#xff1a; 由题意&#xff0c;这里建造的城市需要修路&#xff0c;且每个城市之间可以联通&#xff0c;且 是 1 …

Nautilus Chain 联合香港数码港举办 BIG DEMO DAY活动,释放何信号?

在今年的 10 月 26 日 9:30-18:30 GMT8 期间&#xff0c;Nautilus Chain 联合香港数码港共同举办了 “BIG DEMO DAY” Web3 项目路演活动&#xff0c;包括Xwinner、Sleek、Tx、All weather、Coral Finance、DBOE、PARSIQ、Hookfi、Parallels、Fintestra 以及 dot.GAMING 等在内…

异步请求池——池式组件

前言 本文详细介绍异步请求池的实现过程&#xff0c;并使用DNS服务来测试异步请求池的性能。            两个必须牢记心中的概念&#xff1a; 同步&#xff1a;检测IO 与 读写IO 在同一个流程里异步&#xff1a;检测IO 与 读写IO 不在同一个流程 同步请求 与 异步请求…

JDBC对数据库进行操作

一.使用JDBC查询数据库表t_user的所有数据 1.User表 名称 数据类型 主键 是否为空 说明 ID number 是 用户编号 NAME Varchar2(50) 用户名 AGE varchar2(5) 用户年龄 BIRTH date 用户生日 PWD varchar2(20) 否 用户密码 import java.sql.Connection; import java.sql.Date; …