前端项目学习记录2:sass的使用

news/2025/1/15 22:59:28/

1.安装sass

pnpm i sass

2.配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
//引入svg需要用到的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({plugins: [vue() , createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[dir]-[name]'})],resolve:{alias:{"@":path.resolve(__dirname , "./src"),}},css:{ //scss全局变量的配置preprocessorOptions:{scss:{javascriptEnabled:true,additionalData:`@import "./src/styles/variable.scss";`}}}
})

3.main.ta引入css文件

import '@/styles/index.scss'

4.写styles文件夹

        index.scss        主文件

        reset.scss        初始化文件(可以去npm搜别人写好的)

        variable.scss        放变量


http://www.ppmy.cn/news/1450744.html

相关文章

C++11 设计模式6. 建造者模式,也叫做生成器模式

一 什么是建造者模式? // 小木公司对于SQL有配置,因此要输入sql url,然后输入 sql username,然后是 sql ps //因此小木就想到了使用 SystemConfig这个类来完成上述的三个初始化 //5.1号小木公司加入了redis的缓存机制&#xff0…

Multi-Thread TCP Server Client

prerequisite knowledge: Basic TCP Server & Client: URL Server #include <stdio.h> #include <string.h> #include <unistd.h> // read and write (TCP); sendto and recvfrom (UDP) #include <arpa/inet.h> // 包含#include <sys/socket.…

TCP协议在物联网中的实战

一、TCP协议介绍 网上对TCP协议介绍众多&#xff0c;本人按照自己的理解简单介绍一下。 TCP&#xff08;Transmission Control Protocol&#xff0c; 传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输控制层通信协议。 1.1 协议机制 1.1.1 三次握手 &…

线上线下包搭建小程序/公众号/H5 支持二开!

网上交友有以下三个积极影响&#xff1a; 1. 扩展社交圈和增加社交机会&#xff1a;网上交友可以让人们接触到不同地区、不同背景、不同文化的人&#xff0c;拓展人们的社交圈并且增加交友机会。这些新的社交联系对于个人的成长和发展有积极的影响&#xff0c;可以让人们学习新…

SpringBoot 打包所有依赖

SpringBoot 项目打包的时候可以通过插件 spring-boot-maven-plugin 来 repackage 项目&#xff0c;使得打的包中包含所有依赖&#xff0c;可以直接运行。例如&#xff1a; <plugins><plugin><groupId>org.springframework.boot</groupId><artifact…

线性神经网络示例

通过5个条件判定一件事情是否会发生&#xff0c;5个条件对这件事情是否发生的影响力不同&#xff0c;计算每个条件对这件事情发生的影响力多大&#xff0c;写一个线性神经网络模型pytorch程序,最后打印5个条件分别的影响力。 一 在这个场景中&#xff0c;一个线性神经网络&…

什么是 IoT,代表性的 IoT 产品或服务都有哪些?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 物联网&#xff08;IoT&#xff09;是一个由互联设备组成的网络&#xff0c;包括嵌入传感器、软件等技术的机械和数字机器&#xff0c;以及消费品。这些设备能够相互连接&#xff0c;并与云交换数据。I…

杨辉三角(C语言)

一、N-S流程图&#xff1b; 二、运行结果&#xff1b; 三、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int a[10][10] { 0 };int i, j;//赋值&#xff1b;a[0][0] 1;//实现杨辉三角&#xff1b;…