如何在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";',
      },
    },
  },
相关推荐
二哈喇子!3 小时前
BOM模型
开发语言·前端·javascript·bom
二哈喇子!3 小时前
Vue2 监听器 watcher
前端·javascript·vue.js
yanyu-yaya3 小时前
前端面试题
前端·面试·前端框架
二哈喇子!3 小时前
使用NVM下载Node.js管理多版本
前端·npm·node.js
GGGG寄了4 小时前
HTML——文本标签
开发语言·前端·html
2501_944521594 小时前
Flutter for OpenHarmony 微动漫App实战:推荐动漫实现
android·开发语言·前端·javascript·flutter·ecmascript
Amumu121385 小时前
Vue核心(三)
前端·javascript·vue.js
CoCo的编程之路5 小时前
2026 前端效能革命:如何利用智能助手实现“光速”页面构建?深度横评
前端·人工智能·ai编程·comate·智能编程助手·文心快码baiducomate
RFCEO5 小时前
HTML编程 课程五、:HTML5 新增语义化标签
前端·html·html5·跨平台·语义化标签·可生成安卓/ios·html最新版本
2501_944521596 小时前
Flutter for OpenHarmony 微动漫App实战:图片加载实现
android·开发语言·前端·javascript·flutter·php