如何在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";',
      },
    },
  },
相关推荐
kgduu14 小时前
js之错误处理
开发语言·前端·javascript
德莱厄斯14 小时前
Milkup 技术内幕:一个 Typora 风格的即时渲染 Markdown 编辑器是怎样炼成的
前端·javascript·markdown
Mintopia14 小时前
架构师的心胸:把分歧装进系统,把人放在方案前
前端·架构
亿元程序员14 小时前
不是说现在AI很牛吗,怎么连个高光Shader效果都写不好?
前端
孟祥_成都14 小时前
金三银四,一个面试官连连夸赞的个人网页技术分享
前端·面试·three.js
兆子龙15 小时前
Vite 插件系统与构建流水线源码解析:从 Rollup 插件到 HMR
前端
代码老中医15 小时前
Node_modules 比黑洞还重,我们的硬盘到底做错了什么?
前端
兆子龙15 小时前
Vue 3 响应式系统 Reactivity 源码深度解析:从 ref 到 effect 的完整链路
前端
Smoothcloud_润云15 小时前
GORM 事务管理与 Repository 模式完整指南
前端·数据库·代码规范
兆子龙15 小时前
Turborepo 与 Monorepo 任务调度源码解析:从 DAG 到增量构建
前端·架构