Não é possível importar css na aplicação ReactJs

votos
0

Eu estou tentando converter um modelo HTML para uma aplicação ReactJs. Tudo funciona bem com

<link rel=stylesheet href=%PUBLIC_URL%/css/styles-merged.css>

no public\index.htmlarquivo, mas quando eu mover o style.min.cssarquivo a partir do public\css folderao src\index.js, então ele não funciona. Tenho certeza de que estou cometendo um erro novato. O que estou fazendo de errado?

estrutura de arquivo

public
   index.html
src
   index.js
   app.js 
   css
      style.min.css
   fonts
      glyphicons-halflings-regular.eot

Erro:

./src/index.js Module not found: Can't resolve 'css/style.min.css' in 'c:\projects\sample\src'

arquivo index.html \ public:

<!DOCTYPE html>
<html lang=en>
  <head>
<meta charset=utf-8>
    <meta name=viewport content=width=device-width, initial-scale=1>    
    <!--<link rel=stylesheet href=%PUBLIC_URL%/css/styles-merged.css>-->
    <link rel=manifest href=%PUBLIC_URL%/manifest.json>
    <link rel=shortcut icon href=%PUBLIC_URL%/favicon.ico>
  </head>  
  <body>
    <div id=root></div>
  </body>
</html>

src \ index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import 'css/style.min.css';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Publicado 20/09/2018 em 04:35
fonte usuário
Em outras línguas...                            


1 respostas

votos
1

import './css/style.min.css'

Você tem que fornecer um caminho relativo para o módulo a ser importado que estão em um diretório relativo (aqui dentro src)

Quando você faz

import 'css/style.min.css'

Ele vai tentar olhar para esse módulo no node_modulesdiretório. É porque ele não está lá, você está recebendo

Módulo não encontrado: Não é possível resolver 'css / style.min.css' em 'c: \ projects \ sample \ src'

Respondeu 20/09/2018 em 04:39
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more