How to import a css file within JSX by link tag or script (React)

Asked

Viewed 178 times

1

Hello, I’m learning React, I saw some basic concepts in a micro-course on youtube, and to train I would like to turn a site I already have into html and bootstrap for React.

One of the problems I found is that I couldn’t import "direct" the part where my javascript/css scripts are.

What is not recognized, and therefore it does not apply to styling/javascript:

App.jsx

import React from "react";
function App() {
    return (
        <>
            <link href="./static/lib/font-awesome/css/font-awesome.css" />
            <link href="./static/lib/Ionicons/css/ionicons.css" />
            <link href="./static/lib/perfect-scrollbar/css/perfect-scrollbar.min.css" />
            <restante do HTML>
        </>
);

export default App

What works:

import React from 'react'
import './static/lib/font-awesome/css/font-awesome.css'
import './static/lib/Ionicons/css/ionicons.css'
import './static/lib/perfect-scrollbar/css/perfect-scrollbar.min.css'

function App() {
    return (
        <>
            <HTML>
        </>
);

export default App

Is there any way to import into JSX, as if it were a normal HTML? How can I do this? I tried to put inside the folder "public", but it also did not work.

javascript html css react

  • Is there a reason you want to do this at the expense of imports directly into the JS?

  • i have some scripts that are imported at the end of the file, such as Popper, bootstrap, jquery, etc. I tried to include these files inside my HTML file (index.html, which is inside the public folder, but even then the Java ones don’t work - I got the path right). To create my React app I used the command "create-React-app".

  • You should keep it "the old-fashioned way". Never mind React.

  • what do you mean by that? should be kept in html?

1 answer

0

I believe you will have to refactor the code using the Imports the way it is done in React, or else you can put this HTML code inside the Index that is in the public folder. As for Javascript I’m not sure but CSS is normally loaded after the application has been compiled.

Browser other questions tagged javascript html css react

You are not signed in. Login or sign up in order to post.