vite 内部支持 .scss .sass 这些文件，为什么还需要再次 install 它们呢？

Question

最近在看关于 vite 如何处理 css 文件时，遇到了官方的这段描述
原文链接：https://vite.dev/guide/features

---

vite 已经内部支持了 .scss 这些 css 预处理器，但是 vite 还需要我们再次安装它们。

问题： 既然已经内置了，为什么还需要手动再安装呢？这和我之间 pnpm install scss 有什么区别呢？我既然已经手动安装了，那么我自然可以使用这些处理器了啊？ vite 在这个环节又做了什么呢？感觉有点前后矛盾？

Answer 1

原题描述本身就不成立，截图里的文档只是说明支持这些后缀名的文件而已……

---

用脚手架写项目写多了的 FEers 们都有个错觉，仿佛任何文件都能 import 进来似的。可你要丢掉这些工具，从零开始写一个 node 项目，你就会发现，其实 node 只支持你 import 两种文件：.js （.cjs/.mjs 算变体）和 .json，别的一概不认。

可你再瞅瞅自己的项目里：

import "foo.css";
import "bar.less";
import img from './baz.png';

这些其他类型的文件照样 import 写的飞起。

你就从来没好奇过为啥 node 不支持的文件类型、用这些 bundler 却都支持了吗？

以前 Webpack 时代干这这事儿的玩意儿叫 loader，现在 rollup/vite 里叫 plugin，本质都是一回事儿。Webpack 没内置任何 loader，任何其他类型的文件全都需要你单独安装对应的 loader；vite 内置了一些常见文件的 plugin，不需要额外单独安装，就这么点儿区别。

但 loader 就是 loader，哪怕它叫 plugin 了也一样，它只干 load 这一件事儿。预处理并不是它的工作职责，你用谁家的预处理器了依然需要单独安装它。

Answer 2

这里的意思是：

1. vite 支持你在代码当中使用这些特殊的样式文件。浏览器本身是不支持的。
2. vite 认得这些文件，并且会自动调用对应的工具来转译这些文件。
3. 但是 vite 并不包含语法解析之类的功能，所以需要你安装对应的转译工具。
4. 对比 webpack，你不仅需要安装转移工具，还要安装对应的 loader，还得完成配置才行。