在 React 项目中用与平台无关的 SASS 编译器替换 node-sass

Question

我们是一个由大约 6 名开发人员组成的团队，具有异构设置（Windows 10、Ubuntu、macOS），并已开始使用 React 进行开发。

在 Linux/macOS 和 Windows 之间编写脚本很痛苦，因此我们决定使用 Bash for Windows 来运行我们的构建。一旦你正确设置了 Bash，它就可以很好地工作，并且与 VS Code 的集成非常好。 但是有一个很大的问题：每当你想在 Bash 之外（使用 CMD 或 PowerShell）更新你的项目时，你实际上是在切换你的操作系统，然后你会从节点收到一个很好的错误-sass 说your environment has changed。

由于重建 node-sass 根本无法正常工作，我们发现解决此问题的唯一方法是删除或重命名 node_modules 并再次运行 npm install，但这非常耗时/耗费资源。

我们已经看到它看起来像there is a native js alternative，但我们想看看是否有人遇到过同样的情况并找到了合适的解决方案。

我们真的没有海量的 SASS 文件，所以我们不太关心性能（这是在 C++ 中使用 libSass 进行处理的要点）。

注意：我们不能总是在 Windows 上使用 Bash，因为我们在一些运行 npm 构建的 Java / React 应用程序中有一些混乱的 Maven 集成，而这将始终在 Windows 中。

Answer 1

我们在应用程序中使用了 Angular 6 前端并且遇到了同样的问题。我们通过将所需的二进制文件签入存储库并使用不同的 Maven 配置文件（每个环境/操作系统一个，默认为我们的 CI 的 linux）将 sass-binary-path 设置为其环境特定的二进制文件来解决它。但是，它仅在您拥有能够设置环境变量的构建系统时才有效。另一个需要注意的是，您必须手动更新二进制文件。

<properties>
    <sass.binary.path.base>${basedir}/node-sass-binaries/</sass.binary.path.base>
</properties>
...
<profile>
  <id>linux</id>
  <activation>
    <activeByDefault>true</activeByDefault>
  </activation>
  <properties>
    <sass.binary.path>${sass.binary.path.base}/linux-x64-64_binding.node</sass.binary.path>
  </properties>
</profile>
<profile>
  <id>windows</id>
  <properties>
    <sass.binary.path>${sass.binary.path.base}/win32-x64-64_binding.node</sass.binary.path>
  </properties>
</profile>
<profile>
  <id>mac</id>
  <properties>
    <sass.binary.path>${sass.binary.path.base}/darwin-x64-64_binding.node</sass.binary.path>
  </properties>
</profile>

Answer 2

一种选择是使用一些 PostCSS 插件：PreCSS & postcss-preset-env。有一篇很好的简短文章here for the transition。

我自己没有这样做；但研究这样做是为了一个大型项目。我看过一些有 SASS 表示法的项目，然后注意到他们只使用 PostCSS+插件，避免了 node-sass 混乱。 只是传递信息。