Unable to import css in ReactJs application

Question

I'm trying to convert an html template to a ReactJs application. Everything works fine with

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

in the public\index.html file but when I move the style.min.css file from the public\css folder to the src\index.js, then it does not work. I am sure that I am making a newbie mistake. What am I doing wrong?

File structure

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

Error:

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

public\index.html file:

<!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();

sudo bangbang · Accepted Answer · 2018-09-20 05:05:06Z

1

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

You have to provide a relative path for the module to be imported that are in a relative directory (here inside src)

When you do

import 'css/style.min.css'

It'll try to look for that module in node_modules directory. It's because it's not there, you're getting

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

edited Sep 20, 2018 at 5:05

answered Sep 20, 2018 at 4:39

sudo bangbang

28.4k11 gold badges78 silver badges77 bronze badges

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

2 Comments

Ajit Goel Over a year ago

I am now getting a "Module not found: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in 'c:\projects\sample\src\css'. The css file refers to src:url(../fonts/glyphicons-halflings-regular.eot). Should not this work based on the relative path of the css file to the font file?

sudo bangbang Over a year ago

You're getting this because the relative url to get that font is wrong in your css file. Try to figure out the relative path of that resource ./ will take resources from same directory ../ will go up a directory. ../../ will go up two directories. I'm understanding that this is because you move style.min.css down a directory. You might have to add a ../ at the beginning of that.

Collectives™ on Stack Overflow

Unable to import css in ReactJs application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related