为什么切换到Vite后Sass配置不生效？Webpack和Vite的CSS处理配置有何不同？

❤丽丽提问于 2026-02-18 21:47:33 阅读 42

前端

我之前用Webpack配置了Sass，现在迁移到Vite后样式文件报错说找不到变量，但代码明明没改啊。之前在vue.config.js里通过chainWebpack添加了sass-loader，现在换成vite.config.js后该怎么配置？


// 我在vite.config.js尝试这样写：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 这里需要添加Sass配置吗？试过加sass选项但没效果
})

项目结构里有/App.scss引入了_variables.scss，用Webpack没问题，现在Vite直接报错：
“Undefined variable: $primary-color.”

难道Vite和Webpack处理CSS预处理器的方式完全不一样？需要额外安装插件吗？

构建工具

我来解答赞 5 收藏

反馈

1 条解答

萌新.东芳 Lv1

Vite和Webpack处理Sass的方式确实有点区别，Vite默认支持Sass，但不会自动加载全局变量文件。试试在vite.config.js里这样配置：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'



export default defineConfig({

  plugins: [vue()],

  css: {

    preprocessorOptions: {

      scss: {

        additionalData: @import "/path/to/your/_variables.scss";

      }

    }

  }

})

记得把路径改成你的实际路径，additionalData就是用来注入全局变量的。别忘了安装sass依赖，npm install sass -D，不然Vite没法处理Sass文件。行了，赶紧去试试吧，我继续肝代码了。

2026-02-18 22:01