How to connect reactjs file with css

Question

I don't have a huge website, but I still want to maintain css separate from my js files.

My folder structure:

static
    css
        style.css
    js
        landing.js

In my landing.js file, I have: import styles from '../css/style.css';

With the above mentioned setup, I am getting this error: react-dom.production.min.js:12 Uncaught Error: Minified React error #130;

Am I doing something wrong? If I must use something like webpack to avoid getting minified errors, why is that the case? Why can't I just use simple CSS?

Note: I'm not using JSX

@HardikModha I guess that's part of my question. Am I forced to use something like webpack to add style? — Gorgorita32 Gorgorita
– Gorgorita32 Gorgorita, Commented Apr 8, 2018 at 17:52
Oops, I missed it. The import statement that you have used is part of the ES6 spec and ES6 is not (yet) fully supported in all browsers. So you'll need to use babel to compile your code which browser can run. Using webpack will make it easier to add plugins like babel, and then for loading the CSS files you can use css-loader and style-loader. — Hardik Modha
– Hardik Modha, Commented Apr 8, 2018 at 18:14

rozalex · Accepted Answer · 2018-04-08 18:47:14Z

2

Link the css file from your main html file where you have the root div of your app.

answered Apr 8, 2018 at 18:47

rozalex

3301 silver badge8 bronze badges

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

Comments

Artem Mirchenko · Accepted Answer · 2018-04-08 18:08:10Z

1

For importing css in .js files in reactJs env you need to set up css-loader.

But if you don't want to play around with webpack or other bundlers, include your css in html file for now.

Other variant is write inline css in your React component, or use stylesheets like Radium.

answered Apr 8, 2018 at 18:08

Artem Mirchenko

2,1701 gold badge11 silver badges21 bronze badges

Comments

Muneeb · Accepted Answer · 2018-04-08 18:12:18Z

0

Instead of importing it in styles just include your css like this

import '../css/style.css'; // ES5
require('../css/style.css');

later after compilation it will become part of your build.

answered Apr 8, 2018 at 18:12

Muneeb

1,57916 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to connect reactjs file with css

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related