将React脚本从1.x升级到3.x会破坏sass变量字体很棒

问题描述

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

昨天，我将网站更新为使用Three.js动画，尝试部署该网站时，我无法缩小错误。我更新为“反应脚本”：“ 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;
}

解决方法

根据您的举报，听起来像是：

A）您升级了不相关的库X（反应脚本）

B），这迫使您升级库Y（node-sass）

C）现在库Z（字体超赞）由于升级到Y而无法正常工作

虽然我不知道每个库的详细信息，但问题很可能是相对于新库Y，您有一个旧的库Z。如果是这样，只需执行以下操作即可：

npm rm font-awesome
npm i font-awesome

应该为您提供最新的超棒字体...并且鉴于它是一个非常受欢迎的库，因此 的新版本可能会与最新的node-sass一起使用。