如何在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";',
      },
    },
  },
相关推荐
CHU7290353 分钟前
直播逛购新体验——直播商城APP前端功能详解
前端·小程序
Jackson__7 分钟前
Agent Skill 和 MCP 到底有什么区别?很多人搞混了
前端·ai编程·mcp
new code Boy1 小时前
Vue2转Vue3速查表
前端·javascript·vue.js
紫_龙1 小时前
最新版vue3+TypeScript开发入门到实战教程之toRefs与toRef实用技巧
前端·javascript·typescript
大家的林语冰1 小时前
Vite 第 1 个 Rolldown 稳定版正式发布,前端构建又一波“工业革命“
前端·javascript·vite
博客zhu虎康2 小时前
我的创作纪念日——五载创作路,以技术赴热爱
前端·经验分享·csdn·技术分享·我的创作纪念日
前端之虎陈随易3 小时前
Vite 8正式发布,内置devtool,Wasm SSR 支持
前端·人工智能·typescript·npm·node.js·wasm
AI_56783 小时前
基于智优达平台的Python教学实践:从环境搭建到自动评测
开发语言·前端·人工智能·后端·python
IT_陈寒3 小时前
JavaScript开发者必备的5个高效调试技巧,90%的人都不知道最后一个!
前端·人工智能·后端
嘉琪0013 小时前
前端数组核心方法(高级视角 + 场景 + 精简)——————2026 0309
开发语言·前端·javascript