如何在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";',
      },
    },
  },
相关推荐
TextIn智能文档云平台5 分钟前
图片转文字后怎么输入大模型处理
前端·人工智能·python
专注前端30年8 分钟前
在日常开发项目中Vue与React应该如何选择?
前端·vue.js·react.js
文刀竹肃21 分钟前
DVWA -XSS(DOM)-通关教程-完结
前端·安全·网络安全·xss
lifejump25 分钟前
Pikachu | XSS
前端·xss
进击的野人29 分钟前
Vue 组件与原型链:VueComponent 与 Vue 的关系解析
前端·vue.js·面试
馬致远37 分钟前
Vue todoList案例 优化之本地存储
前端·javascript·vue.js
请叫我聪明鸭37 分钟前
CSS实现单行、多行文本超长显示 / 不超长隐藏、悬浮窗超长展示/不超长隐藏、悬浮窗手动控制样式
前端·javascript·css
blackorbird38 分钟前
苹果修复了两个在定向攻击中被利用的Webkit漏洞,其中一个与谷歌ANGLE漏洞同源
前端·webkit
席之郎小果冻38 分钟前
【04】【创建型】【聊一聊,建造者模式】
java·前端·建造者模式
风无雨41 分钟前
在 React 中实现数学公式显示:使用 KaTeX 和 react-katex
前端·react.js·前端框架