Vue3+Vite中SCSS转CSS并自动保存修改的配置方法

1. 安装SCSS依赖 #

Vite原生支持SCSS预处理器，但需要手动安装编译依赖包：

npm install sass --save-dev
# 或使用yarn/pnpm
yarn add sass -D
pnpm add sass -D

2. Vite核心配置（自动编译） #

Vite默认已实现SCSS文件的实时监听与编译：

• 开发模式下：修改SCSS文件并保存后，Vite会自动编译并通过热更新同步到页面
• 生产打包时：SCSS会被自动编译为CSS，单文件组件中的<style lang="scss">会打包到对应代码块的CSS文件中

自定义编译规则（可选） #

如果需要全局变量注入、自定义CSS输出路径等，修改项目根目录的vite.config.js（或vite.config.ts）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 注入全局SCSS变量文件，无需在每个组件中手动引入
        additionalData: `@import "./src/styles/global-vars.scss";`
      }
    }
  },
  build: {
    rollupOptions: {
      output: {
        // 自定义生产环境CSS文件的输出路径与命名规则
        assetFileNames: 'assets/css/[name].[hash].css'
      }
    }
  }
})

3. 配置编辑器自动保存 #

Vite的热更新依赖文件保存操作，需设置编辑器在停止编辑后自动保存：

• VS Code：快捷键Ctrl+,打开设置，搜索Files: Auto Save，选择afterDelay并设置延迟时长（如1000ms）
• WebStorm：进入设置 -> 工具 -> 保存操作，勾选自动保存编辑的文件到磁盘并配置延迟时间

4. 验证配置效果 #

• 开发环境：执行npm run dev启动项目，修改SCSS文件，编辑器自动保存后页面样式会实时更新
• 生产环境：执行npm run build，查看dist目录下的CSS文件，确认SCSS已成功编译为CSS

内容的提问来源于stack exchange，提问作者Throw