Como importar um arquivo css dentro do JSX por tag link ou script (React)

Question

Olá, estou aprendendo React, vi alguns conceitos básicos em um micro-curso no youtube, e pra treinar eu gostaria de transformar um site que já tenho em html e bootstrap para react.

Um dos problemas que encontrei é que não consegui importar "direto" a parte onde está meus scripts javascript/css.

O que não é reconhecido, e portanto ele não aplica a estilização/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

O que funciona:

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

Tem como realizar a importação por dentro do JSX, como se fosse um HTML normal? Como posso fazer isso? Tentei colocar dentro da pasta "public", mas também não deu certo.

css html javascript react

Rafael Mendes · Answer

Acredito que vc terá que refatorar o código usando os imports da forma que é feito no React, ou então vc pode colocar esse código HTML dentro do Index que fica na pasta public. Quanto ao JavaScript eu não tenho certeza mas o CSS é carregado normalmente depois da aplicação ter sido compilada.

Answered by Rafael Mendes on December 19, 2021

Como importar um arquivo css dentro do JSX por tag link ou script (React)

One Answer

Add your own answers!

Ask a Question