Misterious css error only after building the program, JS React

Question

I am working with react-js. I have a problem that appears only after building the application. I use npm run build to publish I use both surge and git pages

The problem consists in having a css-grid(in .Board) that does not work and also some classes that no longer have their css-area assigned. The css-gird is totally stretched. I don't think the error really matters because the localhost works perfectly. Is it an "import problem"? import "./Board.css"

How can I fix it?

I've tried moving the import below the last import, changing name to the css file. I've also tried publishing the application with both "GitHub pages" and "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"

The code works only before building it

(I'm also using react-router-dom)

Thanks. I hope I was clear.

Updates: The structure:

The structure of the built website:

It's strage that there are local paths online!!!!

HomoVafer · Accepted Answer · 2019-01-02 08:50:31Z

1

At the end I found that moving the css file in the public folder and importing it in the index.html file works well. I already have the strage file structure but it works. Thanks to everyone.

answered Jan 2, 2019 at 8:50

HomoVafer

3433 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tushar Kumawat · Accepted Answer · 2018-12-26 10:22:29Z

0

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

import disabledLink from "./Board.css";

edited Dec 26, 2018 at 10:22

answered Dec 26, 2018 at 10:09

Tushar Kumawat

66111 silver badges23 bronze badges

1 Comment

Tushar Kumawat Over a year ago

please share your folder structure.

Rachid Rhafour · Accepted Answer · 2018-12-26 16:44:20Z

0

I think it is a webpack config problem, can you share your Webpack file? also I think you may have two settings one for Prod and one for Dev that's why it works in localhost and not when u deploy, one of them should have css-loader missing.

Updates: Seems that you have an old version of create-react-app, tree-shaking used to cause such issues, what it does is remove unnecessary imports, and it consider import 'something.css' as not used code because it is not assigned to a variable and not used in the code.

Solution: update the create-react-app. quick fix: add this line of code to your package.json file

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

This should work, and webpack will not tree-shake css files. check webpack documentation.

edited Dec 26, 2018 at 16:44

answered Dec 26, 2018 at 10:26

Rachid Rhafour

4562 silver badges9 bronze badges

8 Comments

HomoVafer Over a year ago

I use create-react-app so I think that should not be the issue

Rachid Rhafour Over a year ago

and you haven't eject the create-react-app yet right ? I mean u didn't made any changes in webpack files?

Rachid Rhafour Over a year ago

Check the updated answer, create-react-app used to have such issue with imported cssf files because of the tree-shaking that webpack 4 apply, adding "sideEffects": [ "*.css" ], to the package.json can fix it, or update create-react-app to the latest version.

HomoVafer Over a year ago

I tried what you said to do but It doesn't work. When I open the built website I notice an error: "Failed to load resource: the server responded with a status of 404 (Not Found)". The website also has css files that are linked via local paths. That's really strange because I import with import "./Board.css". I've published it here: chesstutor.surge.sh

Rachid Rhafour Over a year ago

Alright, we will try something else, if it works it means tree-shaking is the issue. 1: update react-create-app 2: create new project. 3: copy only src files that you have created in your app to the new app. 4: check if u still have same issue.

|

Collectives™ on Stack Overflow

Misterious css error only after building the program, JS React

3 Answers 3

Comments

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related