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

Posted 2023-03-07

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

【英文标题】：Replace node-sass by a platform agnostic SASS compiler in a React project

【发布时间】：2017-12-16 11:53:47

【问题描述】：

我们是一个由大约 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 中。

【问题讨论】：

只是为了分享我们的“解决方案”：我们开始使用 Material-UI 并放弃了 SASS（使用该库后的几行 CSS 不需要）。

【参考方案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>

【讨论】：

很好，我没想到！我只是没有将其标记为“已解决”，因为对我来说，解决方案是拥有一个可能不太优化但我不关心的编译器，它可以在每个操作系统上运行。但同时这是一个有效的解决方案。

【参考方案2】：

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

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

【讨论】：

感谢您的信息！我们最终使用了 JSS (cssinjs.org)，因为我们使用的是 material-ui，它工作得很好:)