如何在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";',
      },
    },
  },
相关推荐
parade岁月15 小时前
理解 CSS backface-visibility:卡片翻转效果背后的属性
前端·css
用户479492835691515 小时前
为什么 react-grab 可以在 Vue 项目中使用?
前端·ai编程
w***42415 小时前
SpringSecurity的配置
android·前端·后端
yugi98783816 小时前
TDOA算法MATLAB实现:到达时间差定位
前端·算法·matlab
锂享生活16 小时前
金句闪卡生成器
前端·javascript·react.js
s***353016 小时前
SpringMVC新版本踩坑[已解决]
android·前端·后端
涔溪16 小时前
深入了解 Vite 的核心特性 —— 开发服务器(Dev Server)和热更新(HMR)的底层工作机制
前端·vite
前端一课16 小时前
【vue高频面试题】第 14 题:Vue3 中虚拟 DOM 是什么?为什么要用?如何提升性能?
前端·面试
前端一课16 小时前
【vue高频面试题】第 17 题:Vue3 虚拟 DOM 与 PatchFlag 原理 + 静态节点提升
前端·面试
前端一课16 小时前
【vue高频面试题】第 13 题:Vue 的 `nextTick` 原理是什么?为什么需要它?
前端·面试