如何在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";',
      },
    },
  },
相关推荐
Sylvia33.4 小时前
网球/羽毛球数据API:专业赛事数据服务的技术实现
java·前端·websocket·json
向下的大树5 小时前
VUE父子组件传参中的触发时机问题:异步场景下的解决方案
前端·javascript·vue.js
英俊潇洒美少年5 小时前
vue2中使用节流防抖函数时,使用的vue状态始终是初始化的数据
前端·javascript·vue.js
棒棒的唐5 小时前
适合小程序使用的将对象数组转换为参数字符串方法
前端·javascript·小程序
博客zhu虎康5 小时前
音频视频处理:前端直播流播放 flv
前端
一位搞嵌入式的 genius5 小时前
深入理解 JavaScript 原型与继承:从基础到进阶
开发语言·前端·javascript
董世昌415 小时前
深度解析var、let、const的区别与最佳使用场景
开发语言·前端·javascript
C_心欲无痕5 小时前
Next.js 平行路由:构建模块化动态布局
开发语言·前端·javascript
warrah6 小时前
前端项目容器化部署问题
前端·docker
GISer_Jing6 小时前
2026前端技术潜在主流前沿方向
前端·人工智能·reactjs