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

1.安装sass

复制代码
pnpm i sass

2.配置vite.config.ts

TypeScript 复制代码
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文件

TypeScript 复制代码
import '@/styles/index.scss'

4.写styles文件夹

index.scss 主文件

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

variable.scss 放变量

相关推荐
番茄比较犟8 分钟前
Combine知识点switchToLatest
前端
北京_宏哥8 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
随笔记11 分钟前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack
Process11 分钟前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
大松鼠君12 分钟前
轿车3D展示
前端·webgl·three.js
Cynthia的梦12 分钟前
Linux学习-Linux进程间通信(IPC)聊天程序实践指南
linux·运维·学习
却尘13 分钟前
URL参数传递的两种方式:查询参数与路径参数详解
前端
下辈子再也不写代码了15 分钟前
分片下载、断点续传与实时速度显示的实现方法
前端·后端·github
婷婷婷婷16 分钟前
AntV X6 常用方法
前端
LucianaiB24 分钟前
拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!
前端·后端·cursor