在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>
相关推荐
lee5761 小时前
老是忘记package.json,备忘一下 webpack 环境下 Vue Cli 和 Vite 命令行工具对比
vue.js
zrhsmile6 小时前
Vue从入门到荒废-单向绑定
javascript·vue.js·ecmascript
thinkQuadratic6 小时前
scss预处理器对比css的优点以及基本的使用
前端·css·scss
程序猿大波7 小时前
基于Java,SpringBoot,Vue,HTML高校社团信息管理系统设计
java·vue.js·spring boot
小浣熊喜欢揍臭臭7 小时前
vue+webpack5(高级配置)
前端·javascript·vue.js
Book_熬夜!7 小时前
Vue2——组件的注册与通信方式、默认插槽、具名插槽、插槽的作用域
前端·javascript·vue.js·前端框架·ecmascript
猫猫不是喵喵.8 小时前
vue 脚手架解决跨域问题
前端·javascript·vue.js
_十六8 小时前
TS 的 unknown 与 any:安全与灵活的平衡点
前端·typescript
三小河8 小时前
tailwindcss @4和@3版本项目引入,及自定义配置
前端·javascript·vue.js