如何在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";',
      },
    },
  },
相关推荐
浪浪山_大橙子1 分钟前
OpenClaw 十分钟快速,安装与接入完全指南 - 推荐使用trae 官方 skills 安装
前端·人工智能
忆江南5 分钟前
iOS 可视化埋点与无痕埋点详解
前端
离开地球表面_996 分钟前
金三银四程序员跳槽指南:从简历到面试再到 Offer 的全流程准备
前端·后端·面试
_柳青杨8 分钟前
跨域获取 iframe 选中文本?自己写个代理中间层,再也不求后端!
前端
比尔盖茨的大脑8 分钟前
事件循环底层原理:从 V8 引擎到浏览器实现
前端·javascript·面试
天才熊猫君9 分钟前
Vue3 命令式弹窗原理和 provide/inject 隔离机制详解
前端
bluceli9 分钟前
Vue 3 Composition API深度解析:构建可复用逻辑的终极方案
前端·vue.js
程序员ys11 分钟前
前端权限控制设计
前端·vue.js·react.js
忆江南13 分钟前
Flutter GetX 深入浅出详解
前端
滕青山25 分钟前
腾讯域名拦截查询 在线工具核心JS实现
前端·javascript·vue.js