CODEWITHSUNDEEP
cssreactjswebpacknetlify
jgarb202
jgarb202

Reputation: 21

CSS Style not being picked up when deployed in netlify

I have created a create-react-app and trying to deploy it using Netlify for the first time (sample is here). However, when deployment is complete, the site looks different than it does locally. For example, my grid layout does not work properly.

I can see that the styles are being packaged differently than they are locally. Netlify is creating some /static/css/*.chunk.css files which does indeed contain my styles. When deployed locally, the styles are simply added in the <head> tag of the parent document as <style type="text/css">

I have tried turning off asset optimization in Netlify. I have also tried renaming my CSS classes, and even included it directly on the index.js file of the create-react-app project. Nothing seems to make a difference.

Here is my package.json

{
  "name": "knowledge-repo",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001/",
  "dependencies": {
    "@toast-ui/react-editor": "^1.0.0",
    "array-move": "^2.1.0",
    "mongoose": "^5.5.13",
    "react": "^16.8.6",
    "react-ace": "^6.5.0",
    "react-codemirror": "^1.0.0",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8",
    "react-sortable-hoc": "^1.9.1",
    "semantic-ui": "^2.4.2",
    "semantic-ui-react": "^0.86.0"
  },
  "scripts": {
    "start": "run-p start:**",
    "start:app": "react-scripts start",
    "start:lambda": "netlify-lambda serve src/lambda",
    "build": "run-p build:**",
    "build:app": "react-scripts build",
    "build:lambda": "netlify-lambda build src/lambda",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "dotenv": "^8.0.0",
    "http-proxy-middleware": "^0.19.1",
    "netlify-lambda": "^1.4.13",
    "npm-run-all": "^4.1.5"
  }
}

Here is the component that is using the *.css 

import React from 'react';
import KnowledgeSubjectBrowser from './KnowledgeSubjectBrowser';
import KnowledgeRepoHeader from './KnowledgeRepoHeader';
import KnowledgeRepoSidebar from './KnowledgeRepoSidebar';
import styles from './KnowledgeRepo.css'

class KnowledgeRepo extends React.Component {

    render(){
        return (
      <div className={styles.krcontainer}>
        <header>
          <KnowledgeRepoHeader />
        </header>
        <nav>
          <KnowledgeRepoSidebar />
        </nav>
        <main>
          <KnowledgeSubjectBrowser />
        </main>
      </div>
        )
    }
}

export default KnowledgeRepo;

The css file as follows:

:local(.krcontainer) {
  display: grid;

  grid-template-areas:
    "header header header"
    "nav content side";

  grid-template-columns: 100px 1fr 200px;
  grid-template-rows: auto 1fr;
  grid-gap: 0px;

  height: 100vh;

}

header {
  grid-area: header;
  background: black;
}

nav {
  padding: 30px 5px 20px 5px;
  grid-area: nav;
  background: black;
}

main {
  grid-area: content;
}

Upvotes: 0

Views: 3894

Answers (3)

kareem kamal
kareem kamal

Reputation: 91

I had the same issue. what worked for me is removing the PurgeCSS postbuild script in package.json

 "scripts": {
    "postbuild": "purgecss --css build/static/css/*.css --content build/index.html build/static/js/*.js --output build/static/css"
 },

Upvotes: 0

Jeremy
Jeremy

Reputation: 1298

I ran into this same issue. For me, it was because I had an empty file import.

In my main.css file, I had the following imports:

@import url("./reset.css");
@import url("./core-styles.css");
@import url("./buttons.css");

However, I deleted the reset.css stylesheet file (while keeping it in the imports) in favor of a different strategy. Everything still built but was not bundling correctly and a few styles were not being handled correctly by Netlify on the deployed site.

Once I removed it from my main.css file (as there was no actual file) everything worked again

Upvotes: 0

jgarb202
jgarb202

Reputation: 21

I figured out the issue. There was a semi-colon at the very end of my css file (typo). Netlify bundles all static files together and therefore the bundled css artifact was not loading properly.

Upvotes: 2

Related Questions