在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>
相关推荐
lucifer3113 分钟前
Vue 生态中 Vite 与 Webpack 插件编写对比:理念、机制与实践
前端·vue.js
旺代22 分钟前
Vue3速通笔记
vue.js·笔记
前端大白话1 小时前
Vue中keep - alive组件的include和exclude属性:前端性能优化的秘密武器
前端·javascript·vue.js
小马爱记录1 小时前
Vue2-指令语法
前端·vue.js·前端框架
Aotman_2 小时前
VUE Element-ui Message 消息提示组件自定义封装
前端·javascript·vue.js·ui·elementui·es6
Shootingmemory2 小时前
VUE的创建
前端·javascript·vue.js
旺代2 小时前
Vue3 模板语法
前端·javascript·vue.js
涵信3 小时前
第七节:进阶特性高频题-Vue3的ref与reactive选择策略
前端·javascript·vue.js
小救星小杜、8 小时前
给vue-admin-template菜单栏 sidebar-item 添加消息提示
前端·vue.js