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

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

前端

我之前用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预处理器的方式完全不一样？需要额外安装插件吗？

构建工具

我来解答赞 15 收藏

反馈

2 条解答

程序员采涵 Lv1

这问题太常见了，Vite和Webpack处理Sass的方式确实不太一样。

Webpack那套是loader机制，你需要自己配置sass-loader。但Vite内置了Sass支持，配置方式完全不同。

首先确保安装了sass：

npm install -D sass

然后在vite.config.js里这样配置：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import path from 'path'



export default defineConfig({

  plugins: [vue()],

  css: {

    preprocessorOptions: {

      scss: {

        additionalData: @import "@/styles/_variables.scss";

      }

    }

  },

  resolve: {

    alias: {

      '@': path.resolve(__dirname, 'src')

    }

  }

})

这样每个scss文件都会自动注入_variables.scss，就不用在每个文件里手动import了。

如果你的变量文件路径不是上面那样，改成实际路径就行。注意是additionalData不是additionalData，我之前也写错过。

还有个坑：如果你的_variables.scss里有中文注释，可能会有编码问题，加个charset解决：

scss: {

  additionalData: @charset "UTF-8"; @import "@/styles/_variables.scss";

}

基本就这样，Vite配置比Webpack简洁多了。

2026-03-11 22:09

萌新.东芳 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