如何在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";',
      },
    },
  },
相关推荐
jerrywus2 分钟前
前端老哥的救命稻草:用 Obsidian 搞定 Claude Code 的「金鱼记忆」
前端·agent·claude
球球pick小樱花7 分钟前
游戏官网前端工具库:海内外案例解析
前端·javascript·css
用户605723748730815 分钟前
AI 编码助手的规范驱动开发 - OpenSpec 初探
前端·后端·程序员
狗胜17 分钟前
AI观察日记 2026-03-02|CLAUDE、TYPE、APPFUNCTIONS:掘金热门里的下一步信号
前端
喝水的长颈鹿19 分钟前
【大白话前端 02】网页从解析到绘制的全流程
前端·javascript
明君8799721 分钟前
Flutter 实现 AI 聊天页面 —— 记一次 Markdown 数学公式显示的踩坑之旅
前端·flutter
用户145369814587822 分钟前
VersionCheck.js - 让前端版本更新变得简单优雅
前端·javascript
米饭同学i23 分钟前
微信小程序实现随机撒花效果
前端
Arthur147261228654724 分钟前
模块化和组件化的区别
前端
codingWhat26 分钟前
整理「祖传」代码,就是在开发脚手架?
前端·javascript·node.js