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

相关推荐
01传说1 分钟前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
小李飞飞砖7 分钟前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖8 分钟前
React Native 状态管理方案全面对比
javascript·react native·react.js
烛阴1 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化1 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月1 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder2 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
fen_fen2 小时前
学习笔记(32):matplotlib绘制简单图表-数据分布图
笔记·学习·matplotlib