前端项目学习记录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 放变量

相关推荐
我不只是切图仔21 分钟前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
XISHI_TIANLAN32 分钟前
【多模态学习】Q&A3:FFN的作用?Embedding生成方法的BERT和Word2Vec?非线性引入的作用?
学习·bert·embedding
JohnYan43 分钟前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
该用户已不存在1 小时前
macOS是开发的终极进化版吗?
前端·后端
小豆包api1 小时前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
陈陈爱java1 小时前
Spring八股文
开发语言·javascript·数据库
布列瑟农的星空1 小时前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天1 小时前
Vue3 实现 B站 视差 动画
前端
KenXu1 小时前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮2 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js