神秘的 css 仅在构建程序后出现错误，JS React

Question

我正在使用 react-js。我有一个 仅在构建 应用程序后才出现的问题。我用 npm run build 发布我使用 surge 和 git pages

问题在于一个css-grid（在.Board中）不起作用并且一些类 不再分配 css-区域 。 css-gird 完全拉长了。我认为该错误并不重要，因为本地主机运行良好。是 "import problem" 吗？ 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

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

import disabledLink from "./Board.css";

Answer 2

我认为这是一个webpack配置问题，你能分享你的webpack文件吗？我还认为您可能有两个设置，一个用于 Prod，一个用于 Dev，这就是为什么它在本地主机上工作而不是在您部署时工作的原因，其中一个应该缺少 css-loader。

更新： 似乎你有一个旧版本的 create-react-app，tree-shaking 曾经导致这样的问题，它所做的是删除不必要的导入，并且它认为 import 'something.css' 为未使用的代码，因为它没有分配给变量，未在代码中使用。

解决方法：更新create-react-app。快速修复：将这行代码添加到您的 package.json 文件

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

这应该有效，并且 webpack 不会摇树 css 文件。检查 webpack documentation.

Answer 3

最后我发现将css文件移动到public文件夹中并导入到index.html文件中效果很好。我已经有了 strage 文件结构，但它可以工作。谢谢大家。

神秘的 css 仅在构建程序后出现错误，JS React

Misterious css error only after building the program, JS React

javascript

css

build

reactjs

react-router-dom