Issue
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;
}
Solution
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.
Answered By - jgarb202
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.