在Vite项目中是否需要将.scss文件编译为.css文件？

• 不需要手动将.scss文件编译为.css文件。Vite 内置了对 SCSS/SASS 的原生处理能力，当你在项目中直接导入.scss文件时，Vite 会在开发和构建流程中自动完成编译工作——包括解析变量、嵌套、混合等 SCSS 语法，最终输出浏览器可识别的 CSS 内容。
• 直接使用.scss扩展名完全可以让项目正常运行，这也是 Vite 推荐的使用方式。你目前看到的“无需手动编译也能正常运行”是正常现象，因为 Vite 已经在后台自动完成了编译环节。

额外补充几点实用细节：

• 如果需要配置全局 SCSS 变量、混合宏等，可以在vite.config.js中通过css.preprocessorOptions.scss进行设置，比如全局引入变量文件：

  export default {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/styles/global-vars.scss";`
        }
      }
    }
  }
  

• 开发模式下，Vite 会对 SCSS 文件做热更新编译，修改代码后页面会实时刷新；生产构建时，会自动将所有 SCSS 编译并压缩为优化后的 CSS 文件。

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