Загадочная ошибка css только после сборки программы JS React

Я работаю с react-js. Имею приложение проблема, которая появляется только после сборки. я использую npm run build для публикации я использую как surge, так и git pages

Проблема состоит в том, что CSS-сетка (в .Board) имеет не работает, а также некоторые классы, что больше не назначена их css-область. Css-gird полностью растянут. Я не думаю, что ошибка действительно имеет значение, потому что localhost работает отлично. Это «проблема с импортом»? import "./Board.css"

Как я могу это исправить?

Я попытался переместить импорт ниже последнего импорта, изменив имя на файл css. Еще пробовал издательский приложение с обоими "страницами GitHub" и "всплеском"

// ----------- Board.css

.Board {
  min-width: 180px;
  min-height: 180px;
  display: grid;
  grid-template-columns: 15px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:
    calc((100% - 15px) / 8) calc((100% - 15px) / 8) calc((100% - 15px) / 8)
    calc((100% - 15px) / 8) calc((100% - 15px) / 8) calc((100% - 15px) / 8) calc((100% - 15px) / 8)
    calc((100% - 15px) / 8);
  /* change line-height .number into cell height */
  grid-template-areas:
    "n8 a8 b8 c8 d8 e8 f8 g8 h8"
    "n7 a7 b7 c7 d7 e7 f7 g7 h7"
    "n6 a6 b6 c6 d6 e6 f6 g6 h6"
    "n5 a5 b5 c5 d5 e5 f5 g5 h5"
    "n4 a4 b4 c4 d4 e4 f4 g4 h4"
    "n3 a3 b3 c3 d3 e3 f3 g3 h3"
    "n2 a2 b2 c2 d2 e2 f2 g2 h2"
    "n1 a1 b1 c1 d1 e1 f1 g1 h1"
    "angle la lb lc ld le lf lg lh";
  margin-left: 5px;
}

.BoardRotated {
  min-width: 180px;
  min-height: 180px;
  display: grid;
  grid-template-columns: 15px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:
    calc((100% - 15px) / 8) calc((100% - 15px) / 8) calc((100% - 15px) / 8)
    calc((100% - 15px) / 8) calc((100% - 15px) / 8) calc((100% - 15px) / 8) calc((100% - 15px) / 8)
    calc((100% - 15px) / 8);
  /* change line-height .number into cell height */
  grid-template-areas:
    "n1 h1 g1 f1 e1 d1 c1 b1 a1"
    "n2 h2 g2 f2 e2 d2 c2 b2 a2"
    "n3 h3 g3 f3 e3 d3 c3 b3 a3"
    "n4 h4 g4 f4 e4 d4 c4 b4 a4"
    "n5 h5 g5 f5 e5 d5 c5 b5 a5"
    "n6 h6 g6 f6 e6 d6 c6 b6 a6"
    "n7 h7 g7 f7 e7 d7 c7 b7 a7"
    "n8 h8 g8 f8 e8 d8 c8 b8 a8"
    "angle lh lg lf le ld lc lb la";
}

.aboveBoardContainer {
  /*display: "inline-block";*/
  /*height: 100%;*/
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.boardContainer {
  width: calc(100vw - 15px);
  height: calc(100vh - 200px) /*calc(70vh)*/;
  max-width: calc(100vh - 200px) /*calc(70vh)*/;
  max-height: calc(100vw - 15px);
}

.boardUI {
  width: calc(100vw - 15px);
  max-width: calc(70vh);
  text-align: center;
}

.angle {
  grid-area: angle;
}

.la {
  grid-area: la;
}
.lb {
  grid-area: lb;
}
.lc {
  grid-area: lc;
}
[...]

.n8 {
  grid-area: n8;
}

.n7 {
  grid-area: n7;
}
[...]

.a8 {
  grid-area: a8;
}

.a7 {
  grid-area: a7;
}
[...]

// ---------- Board.js

import React from "react"
import Chess from "chess.js"
import Piece from "./Piece.js"
import Cell from "./Cell.js"
import Table from "./Table.js"
import Button from "@material-ui/core/Button"
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft"
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
import PromotionModal from "../dialogs/PromotionModal"
import Tree from "./Tree.js"
import SwipeableDrawer from "@material-ui/core/SwipeableDrawer"
import AddIcon from "@material-ui/icons/Add"
import "./Board.css"

Код работает только перед его сборкой

(Я тоже использую react-router-dom)

Спасибо. Надеюсь, я был ясен.

Обновления: Структура:

Структура построенного сайта:

Странно, что есть локальные пути !!!!