在Vue 3 + TypeScript + Vite 项目中安装和使用 SCSS

在Vue 3 + TypeScript + Vite 项目中安装和使用 SCSS

1、安装 SCSS 的相关依赖

javascript 复制代码
npm install sass --save-dev

2、配置 Vite

对于 Vue 3,Vite 已经内置了对 SCSS 的支持,通常不需要额外的配置。但是,如果需要自定义配置,可以在路径/src/styles/variables.scss新建文件,然后在 vite.config.ts 文件中添加或修改配置

javascript 复制代码
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";` // 例如,导入全局变量文件
      }
    }
  }
});

3、使用scss

javascript 复制代码
<style lang="scss">
.example {
  color: red; // 使用 SCSS 语法编写样式
}
</style>
相关推荐
蓝胖子的多啦A梦17 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
海天胜景24 分钟前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
用户38022585982433 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
一生躺平的仔1 小时前
TypeScript入门(九)装饰器:TypeScript的"元编程超能力"
typescript
源码站~2 小时前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐
MiyueFE2 小时前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
江城开朗的豌豆2 小时前
路由守卫通关秘籍:这些钩子函数让你的页面跳转稳如老狗!
前端·javascript·vue.js
加减法原则2 小时前
Vue 模板引用(ref)全面指南:从基础到高级应用
vue.js
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
快起来别睡了2 小时前
Vue 响应式系统与 `computed` 属性详解:小白也能学会的完整指南
vue.js