如何在 Vite 上运行 SASS 和 React？

Question

我用 Vite 创建了一个 React 项目，也想使用 SASS。我已经安装了它，但我通常打开 git bash 并运行sass -w sass:css.

有更好的方法吗？我无法理解文档中的解决方案，也无法理解在线答案。

这是我的package.json：

{
  "name": "my_first_vite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^1.0.7",
    "sass": "^1.49.0",
    "vite": "^2.7.2"
  }
}

Answer 1

我在vite 文档中找到了答案。我不得不跑：

npm add -D sass

Answer 2

在Vite 文档中：

Vite 确实提供了对 .scss、.sass、.less、.styl 和 .stylus 文件的内置支持。不需要为它们安装Vite专用插件，但必须安装相应的预处理器本身

对我来说，sass 似乎应该开箱即用，因为你已经包含了它。应该不需要单独运行 sass 。

当您在开发模式下运行项目vite或使用 构建项目时vite build，它应该自动包含并编译所有 sass 文件。