如何在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";',
      },
    },
  },
相关推荐
嘗_13 分钟前
手写自己的小型react
前端·javascript·react.js
嘀咕博客17 分钟前
h5游戏免费下载:HTML5拉杆子过关小游戏
前端·游戏·html5
Moonbit17 分钟前
MoonBit 推出 LLVM Debugger,核心用户数破十万
前端·编程语言·llvm
zuo-yiran24 分钟前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_3168377525 分钟前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
天天向上102426 分钟前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html
KoProject29 分钟前
发布30款App之后,我总结了这套GLM-4.6全自动化开发流
前端·后端·github
社恐的下水道蟑螂35 分钟前
前端小彩蛋:纯 CSS 实现情侣小球互动,甜到齁的代码我扒下来了
css
前端踩bug工程师36 分钟前
flutter项目
前端
云枫晖36 分钟前
Webpack系列-SourceMap
前端·webpack