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

相关推荐
薛定谔的算法几秒前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku11 分钟前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode16 分钟前
iOS 苹果内购 Storekit 2
前端
LuckySusu17 分钟前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu18 分钟前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu21 分钟前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu22 分钟前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu26 分钟前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在28 分钟前
6个值得收藏的.NET ORM 框架
前端·后端·.net
LuckySusu33 分钟前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript