在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>
相关推荐
90后的晨仔15 分钟前
👂《侦听器(watch)》— 监听数据变化执行副作用逻辑
前端·vue.js
趣多多代言人43 分钟前
20分钟学会TypeScript
前端·javascript·typescript
90后的晨仔43 分钟前
⚙️ 《响应式原理》— Vue 是怎么做到自动更新的?
前端·vue.js
90后的晨仔1 小时前
🧮《计算属性》— 自动根据其它响应式数据得出结果
前端·vue.js
baozj1 小时前
html2canvas + jspdf 前端PDF分页优化方案:像素级分析解决文字、表格内容截断问题
前端·vue.js·开源
可乐拌花菜1 小时前
Vue3 + Pinia:子组件修改 Pinia 数据,竟然影响了原始数据?
前端·vue.js
90后的晨仔1 小时前
🧱 《响应式基础》— Vue 如何追踪你的数据变化?
前端·vue.js
90后的晨仔2 小时前
🚀 Vue 声明式渲染:让 HTML 跟着数据走(超详解)
前端·vue.js
江城开朗的豌豆3 小时前
Element UI 避坑指南:6年老前端的血泪总结
前端·javascript·vue.js
江城开朗的豌豆4 小时前
Vue的provide/inject:组件传值的秘密通道
前端·javascript·vue.js