import css from public folder to any react component

Question

I am working on integrating react package of content builder.

There are lots of files which needs to be keep in public folder and then add the references of css and js in index.html file

<link href="/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
    <link href="/assets/ionicons/css/ionicons.min.css" rel="stylesheet">
    
    <script src="/contentbuilder/lang/en.js"></script>
 <script src="/assets/minimalist-blocks/content.js" type="text/javascript"></script>

Now the css is breaking all others application styles.

I am thinking to import css files in only the component where package is required, but since I am not aware of how to import from public folder, I copied above two css files and put inside the src folder and imported. but it seems css files are using some other css fonts etc. so its not able to work...

Can anyone guide me how to import the css files from public folder to any component.

Thanks

Did you setup webpack config correctly? If not, please refer webpack.js.org/loaders/css-loader/… — TopW3
– TopW3, Commented May 28, 2021 at 13:44

Heydar Naghiyev · Accepted Answer · 2021-05-28 13:44:02Z

2

You can use tag to include a css file in your React app.

<link rel="stylesheet" href="%PUBLIC_URL%/style.css"  type = "text/css" />

Unfortunately, we can not import a css file from the public folder into a JavaScript file (React components).

To import a css file in React components you have to move your style.css file to the src folder and import the file in App.js like this

import './style.css';

answered May 28, 2021 at 13:44

Heydar Naghiyev

811 silver badge6 bronze badges

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

1 Comment

Md. Parvez Alam Over a year ago

as I said already tried this, but this css has internally linked with other files, so its not working

Matteus Barbosa · Accepted Answer · 2024-07-08 16:52:21Z

0

Check how your back end is processing requests

React Router does not handle static files normally

Check if the app is using Express in back end, and add this:

app.use(express.static('public'));

answered Jul 8, 2024 at 16:52

Matteus Barbosa

2,7631 gold badge22 silver badges22 bronze badges

Comments

Harshith Rai · Accepted Answer · 2024-07-08 17:19:46Z

0

I guess it's a really really tiny typo. If you observe the highlighted link tag isn't closed. Just make the tag self-closing. That should have fixed it

<link href="/assets/ionicons/css/ionicons.min.css" rel="stylesheet" />

Observe the /> instead of just > at the end

answered Jul 8, 2024 at 17:19

Harshith Rai

3,1067 gold badges25 silver badges37 bronze badges

Comments

Tamir Abutbul · Accepted Answer · 2022-10-26 20:53:36Z

-1

You can use the <link /> tag in side components' render functions:

return (
<>
    <link href="/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />

    ...
</>
)

edited Oct 26, 2022 at 20:53

Tamir Abutbul

7,6518 gold badges27 silver badges61 bronze badges

answered Nov 17, 2021 at 12:27

baklaci

1

Comments

woyvch · Accepted Answer · 2021-05-28 14:52:20Z

-2

Write the css style in locally in your react app?

answered May 28, 2021 at 14:52

woyvch

476 bronze badges

Collectives™ on Stack Overflow

import css from public folder to any react component

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related