如何在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";',
      },
    },
  },
相关推荐
Jenna的海糖14 分钟前
Vue 项目首屏加载速度优化
前端·javascript·vue.js
前端梭哈攻城狮20 分钟前
js计算精度溢出,自定义加减乘除类
前端·javascript·算法
北辰alk23 分钟前
React JSX 内联条件渲染完全指南:四招让你的UI动态又灵活
前端
前端小巷子25 分钟前
最长递增子序列:从经典算法到 Vue3 运行时核心优化
前端·vue.js·面试
zayyo25 分钟前
深入解读 SourceMap:如何实现代码反解与调试
前端
龙在天28 分钟前
以为 Hooks 是银弹,结果是新坑
前端
wayhome在哪37 分钟前
前端高频考题(css)
前端·css·面试
wayhome在哪1 小时前
前端高频考题(html)
前端·面试·html
冰糖雪梨dd1 小时前
vue在函数内部调用onMounted
前端·javascript·vue.js
CC__xy1 小时前
《ArkUI 记账本开发:状态管理与数据持久化实现》
java·前端·javascript