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

Question

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

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

Как это исправить?

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

// ---------- 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)

Спасибо.Надеюсь мне понятно.

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

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

Жаль, что локальных путей онлайн !!!!

Answer 1

Я думаю, что это проблема конфигурации веб-пакета, вы можете поделиться своим файлом веб-пакета?также я думаю, что у вас может быть две настройки, одна для Prod и одна для Dev, поэтому она работает в localhost, а не при развертывании, у одной из них должен отсутствовать css-загрузчик.

Обновления: Кажется, у вас есть старая версия create-реагировать-app, встряхивание дерева, используемое, чтобы вызвать такие проблемы, что это делает, удаляет ненужный импорт, и это рассматривает import 'something.css' как неиспользуемый код, потому что это не назначено переменнойи не используется в коде.

Решение: обновить create-react-app.быстрое исправление: добавьте эту строку кода в ваш package.json файл

"sideEffects": [
  "*.css"
],

Это должно работать, и webpack не будет трясти файлы CSS.проверьте веб-пакет документация .

Answer 2

В конце я обнаружил, что перемещение файла css в общую папку и импорт его в файл index.html работает хорошо.У меня уже есть структура файлов strage, но она работает.Спасибо всем.

Answer 3

Please try
Install:-
npm install --save-dev style-loader
npm install --save-dev css-loader

import disabledLink from "./Board.css";