如何在 Vite 上使用 React 运行 SASS？

Question

我用 Vite 创建了一个 React 项目，也想使用 SASS，我已经安装了它，但我通常打开 git bash 和 run 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中：

Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed

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

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

Answer 2

我在 vite docs 中找到了答案。我不得不运行:

npm add -D sass

如何在 Vite 上使用 React 运行 SASS？

How to run SASS whit React on Vite?

sass

reactjs

vite