如何在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";',
      },
    },
  },
相关推荐
炽烈小老头9 分钟前
浏览器渲染原理:从 HTML 到像素的全链路拆解
前端
打小就很皮...10 分钟前
React 合同审查组件:按合同原文定位
前端·react.js·markdown
EndingCoder20 分钟前
设计模式在 TypeScript 中的实现
前端·typescript
夏天想25 分钟前
服务端渲染 (SSR)、预渲染/静态站点生成(SSG)
前端
晚霞的不甘39 分钟前
Flutter for OpenHarmony 引力弹球游戏开发全解析:从零构建一个交互式物理小游戏
前端·flutter·云原生·前端框架·游戏引擎·harmonyos·骨骼绑定
春日见42 分钟前
Docker中如何删除镜像
运维·前端·人工智能·驱动开发·算法·docker·容器
码农六六1 小时前
前端知识点梳理,前端面试复习
前端
打小就很皮...1 小时前
React 合同审查组件:按合同标题定位
前端·react.js·markdown
CHU7290351 小时前
智慧陪伴新选择:陪诊陪护预约小程序的暖心功能解析
java·前端·小程序·php
奔跑的web.1 小时前
TypeScript namespace 详解:语法用法与使用建议
开发语言·前端·javascript·vue.js·typescript