Question

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

问题在于不可用的 css-grid （在.Board中），还有某些类不再分配其CSS区域。 CSS网格完全被拉伸。我认为错误并不重要，因为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 ）

谢谢。我希望我很清楚。

更新：结构：

内置网站的结构：

奇怪的是，有在线本地路径 !!!!

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的设置，这就是为什么它可以在localhost而不是在您部署时使用的原因，其中之一应该缺少css-loader。

更新：似乎您有一个旧版本的create-react-app，用于引起此类问题的摇树，它的作用是删除不必要的导入，并且将import 'something.css'视为未使用的代码，因为未分配给变量，未在代码中使用。

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

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

这应该工作，并且webpack不会摇晃CSS文件。检查webpack documentation。

Answer 3

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

仅在构建程序JS React后出现严重的CSS错误

3 个答案: