如何在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";',
      },
    },
  },
相关推荐
恋猫de小郭1 小时前
Flutter 正在计划提供 Packaged AI Assets 的支持,让你的包/插件可以更好被 AI 理解和选择
android·前端·flutter
小小前端--可笑可笑1 小时前
Vue / React 单页应用刷新 /login 无法访问问题分析
运维·前端·javascript·vue.js·nginx·react.js
小林敲代码77882 小时前
记一次 Vue 项目首屏优化:从 7.1s 到 0.9s,深挖 Gzip 的力量
前端·javascript·vue.js
前端大卫2 小时前
写给年轻程序员的几点小建议
前端
NEXT063 小时前
React 闭包陷阱深度解析:从词法作用域到快照渲染
前端·react.js·面试
脱离语言3 小时前
Jeecg3.8.2 前端经验汇总
开发语言·前端·javascript
NEXT063 小时前
useMemo 与 useCallback 的原理与最佳实践
前端·javascript·react.js
小爱丨同学3 小时前
React-Context用法汇总 +注意点
前端·javascript·react.js
徐同保4 小时前
python如何手动抛出异常
java·前端·python
极客小云5 小时前
【实时更新 | 2026年国内可用的npm镜像源/加速器配置大全(附测速方法)】
前端·npm·node.js