将 React 脚本从 1.x 升级到 3.x 会破坏 sass 变量（字体真棒）答案

【问题标题】：upgrading React script from 1.x to 3.x breaks sass variables (font awesome)将 React 脚本从 1.x 升级到 3.x 会破坏 sass 变量（字体真棒）
【发布时间】：2020-12-16 19:15:04
【问题描述】：

我正在为我的投资组合网站使用 React 简历模板。当我使用 react-script 1.x 时，一切正常。

昨天我更新了我的网站以使用 three.js 动画，但在尝试部署该网站时，我遇到了缩小失败失败的错误。我更新为“react-scripts”：“3.4.1”

更新 react-scripts 后，安装 node-sass 时出错，我安装了。

现在我有一个 sass 变量错误。

SassError: Undefined variable: "$fa-css-prefix".
        on line 3 of /home/tom/Desktop/lighthouse/react-resume-template/public/css/font-awesome/scss/_fixed-width.scss
>> .#{$fa-css-prefix}-fw {

我基本上对 sass 和 css 变量一无所知......以及导入这些东西。除了主要的 font-awesome.scss 之外，我实际上没有看到任何导入语句，所以我有点迷路了。

font-awesome.scss

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "rotated-flipped";
@import "stacked";
@import "icons";

_fixed-width.scss

.#{$fa-css-prefix}-fw {
  width: (18em / 14);
  text-align: center;
}

【问题讨论】：

标签： reactjs sass font-awesome react-scripts

【解决方案1】：

根据您的报告，听起来是这样的：

A) 你升级了不相关的库 X (react-scripts)

B) 这迫使你升级库 Y (node-sass)

C) 现在库 Z (font-awesome) 因升级到 Y 而无法工作

虽然我不知道每个库的具体情况，但问题很可能是您有一个旧库 Z，相对于您的新库 Y。如果是这种情况，只需执行以下操作：

npm rm font-awesome
npm i font-awesome

应该给你最新的 font-awesome ... 并且鉴于它是一个非常流行的库，新版本可能将与最新的 node-sass 一起使用。

【讨论】：