如何在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";',
      },
    },
  },
相关推荐
无我Code12 小时前
全套开源:一款云端服务+本地设备计算的文生图应用
前端·人工智能·后端
用户693717500138413 小时前
实测可用|小米 MiMo 百万亿 Token 免费领,开发者速冲
前端·后端·ai编程
前端小万13 小时前
令人头痛的前端环境
前端·前端工程化
明月_清风13 小时前
Nginx 模块机制深度解析:从核心原理到生产实践
前端·nginx
APIshop13 小时前
1688 跨境寻源通详情接口深度解析:从接入到实战
前端·网络·chrome
爱上好庆祝13 小时前
学习js的第四天
前端·css·学习·html·css3·js
d111111111d13 小时前
UAER问题+修复小bug
前端·javascript·笔记·stm32·单片机·嵌入式硬件·学习
kyriewen1114 小时前
Next.js:让你的React应用从“裸奔”到“穿衣服”
开发语言·前端·javascript·react.js·设计模式·ecmascript
MXN_小南学前端14 小时前
基于 Vue3 + ECharts 的数据大屏实例(提供gitHub仓库地址)
前端·javascript·echarts