如何在vue3中使用scss

要使用scss首先需要下载相关的包

可以在终端使用下面的命令下载相关包

npm install -D sass

在src文件下新建一个文件夹叫做styles

在文件夹下创建三个文件

index.scss主要用来引用其他文件

reset.scss用来清除默认的样式

variable.scss用来配置全局属性

需要在vite.config.ts中配置一个全局配置

代码如下

css 复制代码
css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },
相关推荐
天蓝色的鱼鱼27 分钟前
从“死了么”到“我在”:用uniCloud开发一款温暖人心的App
前端·uni-app
小徐_233331 分钟前
uni-app 组件库 Wot UI 的 AI 友好型编程指南
前端·uni-app
HelloReader33 分钟前
Flutter Widget 基础手把手教你创建自定义组件(二)
前端
Hilaku37 分钟前
在 HTTP/3 普及的 2026 年,那些基于 Webpack 的性能优化经验,有一半该扔了
前端·javascript·面试
前端付豪41 分钟前
AI 数学辅导老师项目构想和初始化
前端·后端·python
HelloReader41 分钟前
从零创建你的第一个 Flutter 应用(一)
前端
程序员阿峰41 分钟前
别再写JS监听滚动了!一行CSS搞定导航固定+通讯录效果(附3个案例)
前端
wordbaby44 分钟前
前端进阶:小程序 Canvas 2D 终极指北 — 给图片优雅添加水印
前端·canvas
树上有只程序猿1 小时前
OpenClaw虽香,但不是人人都养得起“小龙虾
前端·openai
SuperEugene1 小时前
Vue3 + Element Plus 全局 Message、Notification 封装与规范|Vue生态精选
前端·javascript·vue.js