Linking to css files from react index

Question

I have this simple index :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>SB Admin - Bootstrap Admin Template</title>

<!-- Auth0Lock script -->
<script src="//cdn.auth0.com/js/lock-9.1.min.js"></script>

<!-- Bootstrap Core CSS -->
<link href="/ui/css/bootstrap.min.css" rel="stylesheet" />

<!-- Custom CSS -->
<link href="/ui/css/sb-admin.css" rel="stylesheet" />

<!-- Custom Fonts -->
<link href="/ui/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

 </head>
  <body>
    <div id="root">
    </div>
    <script src="/static/bundle.js"></script>
  </body>
</html>

But for some reason, after running npm start, it doesn't get access to the css files.. so i get a page without style. Here is the tree of my project:

actions
components
containers
dist
middleware
node_modules
reducers
store
ui
--css
--font-awesome
index.html
index.js
webpack.config.js
package.json

just this: Warning: Unknown DOM property class. Did you mean className? But it may not be related to this problem. — Remis07
– Remis07, Commented Jun 22, 2017 at 14:22

Mμ. · Accepted Answer · 2017-06-22 14:35:15Z

36

If you want to include css in your html, you gotta put them in your public folder and use '%PUBLIC_URL%' as the path to your css. So it would look something like this:

<link href="%PUBLIC_URL%/bootstrap.min.css" rel="stylesheet" />

Alternatively, it is highly recommended that you do import the css that you want inside your react component, because your css would get minified and bundled. So you could do something like:

import React, { Component } from 'react';
// ... rest of imports
import './path/to/css/font-awesome.min.css'

For more info on this, go to the documentation here.

answered Jun 22, 2017 at 14:35

Mμ.

8,5723 gold badges28 silver badges36 bronze badges

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

1 Comment

Mamrezo Over a year ago

I just wonder, how I ignored

Notice the use of %PUBLIC_URL% in the tags above.       It will be replaced with the URL of the public folder during the build.       Only files inside the public folder can be referenced from the HTML.

in default html file ...

Collectives™ on Stack Overflow

Linking to css files from react index

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related