vue3.0 + vite:中使用 sass

1、安装依赖

npm i sass sass-loader --save-dev

在项目的src/assets文件夹下新建style/index.scss 文件

2、在 vite.config.ts 中加:

复制代码
resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
},
css: {
  // 配置 SCSS 支持
  preprocessorOptions: {
    scss: {
      additionalData: `@use "@/assets/index.scss" as *;`
    }
  }
}

3、在组件再直接引用即可

相关推荐
x***r1517 分钟前
linux安装 redis-5.0.5.tar.gz 详细步骤(源码编译、配置、启动)
前端
程序员小羊!12 分钟前
01HTML预备知识
前端·html
xkxnq20 分钟前
第八阶段:工程化、质量管控与高级拓展(130天),Vue端到端测试:Cypress自动化测试(登录流程+表单提交+页面跳转)
前端·vue.js·flutter
小雨下雨的雨22 分钟前
基于鸿蒙PC Electron框架技术完成的五子棋游戏 - 技术实现详解
前端·javascript·游戏·华为·electron·鸿蒙
cheems952724 分钟前
[开发日记]Spring Boot + MyBatis-Plus 抽奖系统开发复盘:从奖品创建、活动校验到前端圈选人员失效的一次完整排障
前端·spring boot·mybatis
老毛肚24 分钟前
jeecgboot vue API 拆分02
前端·javascript·vue.js
赵谨言31 分钟前
基于C#的在线编码与自动化测试全栈Web平台的设计与实现
开发语言·前端·c#
Raink老师35 分钟前
【AI面试临阵磨枪-98】前端如何展示多模态流式输出:文字打字机 + 图片渐进 + 音频播放?
前端·人工智能·面试
AI_零食38 分钟前
奶茶大数据运维表 - 鸿蒙PC Electron框架技术实现详解
运维·前端·华为·electron·开源·harmonyos·鸿蒙
小雨下雨的雨40 分钟前
鸿蒙PC Electron框架实现流体气泡模拟器
前端·人工智能·算法·华为·electron·鸿蒙