I'm making a portfolio in react, I want to display my other projects in it, so I put them in separate folders, when I import the folder to display in the project it assumes the default css style at home, there's a way to make it just use the css of the folder where it comes from he came? or will I have to host the other projects and access them by link?
PS: I'm saying that not even in html when you have the main project folder and want to access another project then direct the link to /(another folder)/index.html
I tried to use react router dom, to do this but it didn't work, as I said the css of the files got mixed up
Related
Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.
My current project setup is:
/src/App.js
/src/components/
index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')
/src/components/{component-name}
{component-name.js}
{component-name.scss}
Currently trying sass#v1.56.1 and sass-loader#13.2.0, but not sure about the proper setup.
Might need to do a modular setup to accomplish this or just stick with JSS?
I am new to Gatsby and React. I have set up a site using LekoArts' gastby-theme cara
I understand that what I create in the theme folder (src/#lekoarts/gatsby-theme-cara) will shadow the files seen in the theme's src folder. Which can be viewed here on github:
https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-cara/src
What I want to do is shadow the "templates/cara.tsx" file, there I am able to affect the size of different sections in the theme.
The issue is that that .tsx file has many other components that need to be imported that I don't want to shadow, how do I import these files that are on the themes directory (without having to shadow them as well)?
Here's a screenshot of the "templates/cara.tsx" file and all it's imports underlined
I have tried shadowing all files that need to be imported, but it got out of hand as they all have their own dependencies that need to be imported as well.
Thanks for your time
For anyone in the future that gets confused by this same thing:
You can access the theme's files using:
import Layout from "#lekoarts/gatsby-theme-cara/src/components/layout"
If you are using a different gatsby-theme check 'gatsby-config.js' look for plugins: [ { resolve: use this path for accessing it's src,
for my theme it gives "#lekoarts/gatsby-theme-cara" so I then add src/components/layout to access the layout component (without having to shadow it locally).
I'm new to Gatsby and I started a project using a starter, Gatsby-starter-ghost. The starter comes with the Casper theme, and now I want to replace Casper with a new theme or build a custom theme.
I can't figure out how to replace Casper or even find where it is in the project folders. There is a lot of documentation available on Gatsby themes and starters but I can barely find any documentation for gatsby-starter-ghost. I've dug through the node_modules and src folders and can't even find where the Casper theme is located. If I install a new theme with npm and put the plugin in the gatsby-config file it breaks my project and I get GraphQL errors galore. I've read that themes should usually be in the content folder, but my content folder contains nothing but two empty folders.
Here is my project structure:
How do I replace the theme in the gatsby-ghost-starter?
Gatsby Themes use a concept called 'shadowing'. You can replace any of the default files for the theme by placing a file with the same path and name in your content folder. This is probably why your folder doesn't have any theme files, the starter is just using all the defaults.
That said, looking at gatsby-starter-ghost, it doesn't look like it's using a Gatsby Theme at all, so shadowing doesn't apply.
If you look at gatsby-starter-ghost/src/components/common/, it has various files which define the components that are being used. Most notably, Layout.js is setting out the base structure for every page, and imports a CSS file from ../../styles/app.css.
This CSS, those common components, as well as the various template files in src/templates are what is defining the HTML structure of the pages, and the CSS that those use. If you adjust those, you should be able to change the design to suit your needs.
Start by looking at app.css and adjusting it a bit, see how far that takes you. But you may need to update the components if you want to introduce new classes or change the HTML structure.
I had a template, that I wanted to convert to React JS components, and I successfully did that. As all of us know, that there are bunch of libraries used in a template. What I first did is, I inserted the .css and .js libraries into the react app through the index.html file, in the public folder of the create-react-app boiler plate. It successfully used the styles and scripts from the inserted .js and .css files. But the problem occurred when I added routing to the react app.
When, I navigate to another route through a link, the component loads, but the required styles and scripts doesn't loads. I don't know what the problem is. I tried to import the scripts and styles to the parent component which is home.js. The styles worked properly, but the libraries used in template are :
bootstrap.min.js,
eva.min.js,
feather.min.js,
jquery.min.js,
jquery-slim.min.js, and
popper.min.js.
On each import of the above libraries, it shows different errors. But as an example, for jquery.min.js it shows the following error :
In public folder add the following code in of the index.html page.
<base href="/">
I have a simple project working nicely using JSX / React / Gatsby.
I have a pre-existing page (think landing page) in HTML in another project, quite complex, nicely styled using Bootstrap 4, let's call it LandingPage.html and an associated LandingPage.css.
I would like to add the landing page to my Gatsby site. So that for example when navigating to localhost:3000/LandingPage.html the landing page gets shown, properly styled etc.
I am not clear whether I have to fully convert my pre-existing HTML into a react component / JSX?
Or whether I can just serve the LandingPage.html (and associated styling files) by placing it somewhere sensible in my Gatsby project structure?
Or whether I have to create a react "wrapper" that at "run time" reads in the content of LandingPage.html and LandingPage.css?
Note: I've tried just putting the LandingPage.html and LandingPage.css into the /public folder and actually that does work! So maybe I've answered my own question. But is the the right way to do it?
As of Gatsby v2 (don't know about previous versions), it is maybe more consistent to add the file to the /static folder.
According to the docs, the /public folder is meant to be generated automatically when building the site and should be added to .gitignore.
Files added to the /static folder will be copied to /public when building the site so it should have the same effect. More info here.