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

【问题标题】：How to run SASS whit React on Vite?如何在 Vite 上使用 React 运行 SASS？
【发布时间】：2022-03-30 01:58:12
【问题描述】：

我用 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"
  }
}

【问题讨论】：

标签： reactjs sass vite

【解决方案1】：

在Vite docs：

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

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

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

【讨论】：

所以我只需要像往常一样添加 .scss 文件吗？会试试看！ tysm！
确实可以直接使用，只需要先安装sass！ TYSM！！

【解决方案2】：

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

npm add -D sass

【讨论】：