如何在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 docs中找到了答案。我必须跑：

npm add -D sass

Answer 2

在Vite文档中：

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

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

当您使用

vite

在开发模式下运行项目或使用

vite build

构建项目时，它应该自动包含并编译所有 sass 文件。

Answer 3

对于 vite 版本：5.4.1，

yarn add -D sass-embedded

工作正常。我的

.scss

文件在安装后开始拾取。