如何在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";',
      },
    },
  },
相关推荐
arvin_xiaoting2 小时前
OpenClaw学习总结_I_核心架构_8:SessionPruning详解
前端·chrome·学习·系统架构·ai agent·openclaw·sessionpruning
工程师老罗3 小时前
Image(图像)的用法
java·前端·javascript
swipe4 小时前
把 JavaScript 原型讲透:从 `[[Prototype]]`、`prototype` 到 `constructor` 的完整心智模型
前端·javascript·面试
问道飞鱼4 小时前
【前端知识】React 组件生命周期:从底层原理到实践场景
前端·react.js·前端框架·生命周期
CHU7290354 小时前
定制专属美丽时刻:美容预约商城小程序的贴心设计
前端·小程序
浩~~5 小时前
反射型XSS注入
前端·xss
AwesomeDevin5 小时前
AI时代,我们的任务不应沉溺于与 AI 聊天,🤔 从“对话式编程”迈向“数字软件工厂”
前端·后端·架构
harrain5 小时前
antvG2折线图和区间range标记同时绘制
前端·javascript·vue.js·antv·g2
德育处主任Pro5 小时前
从重复搭建到高效生产,RollCode的H5开发新范式
前端
蜡台6 小时前
SPA(Single Page Application) Web 应用(即单页应用)架构模式 更新
前端·架构·vue·react·spa·spa更新