1

I am trying to create a webpage using a HTML theme on Reactjs. I have studied and found there are 4 ways to import CSS at this link. All these ways outputs the same way i.e <style>MY_CSS</style> just before closing HEAD tag.

This is OK for single CSS but when we are using multiple CSS it may conflict with other one.

So my question is can we import CSS so that it will show in not as <style></style>. As <style> tags works as inline CSS and I don't want to use it inline.

2nd question: How can I import Js? As I am using requirejs to load multiple js, for this I am trying to import require.config.js where my other js are called.

Please have a look what I am getting this is I am getting from all the codes I have used

Need to have like this below I need CSS to import it like this but not commented, this is a commented code

Please help, thanks in advance!

4 Answers4

1

The easiest way to learn React and the way you should structure a React project ( this includes everything, from css, to multiple js files, etc ) is to use create-react-app

Let me try to elaborate a bit.

React is a javascript library. You could, for example, get the library from a cdn and include it in your index.html file much in the same way you would get jquery for example. And, with the library included, you could do things like this:

const element = React.createElement(
  'h1',
  null,
  'Hello, world!'
);
const container = document.getElementById('root');
ReactDOM.render(element, container);

Since you have the library from a cdn, you have access to it's methods, for example createElement and the library will look for a node in the dom with id called root and insert there a h1 node containing Hello, world!. You could then apply to the newly created node a style of your choice.

This example was taken from here

While it is certainly possible to use React this way, you shouldn't, in my opinion.

What you should do is follow the steps outlined in the create-react-app link and bootstrap a project using create-react-app. This will give you a pre configured project, that will allow you to use the library in a modern way.

The project that create-react-app offers you is set up to use a tool called webpack and a tool called babel. Webpack is a module bundler. Using a set of rules, it will take several files and bundle them together. How and why it works is beyond the scope of this question. Babel is a javascript compiler or syntax transformer. Also using a set of rules, it turns ES6 into regular javascript. Again, the how and the way are out of scope. What you should know is, because of webpack and babel, you will be able to write code like this.

import styles from 'style.module.css'

This is done with no effort on your part, because everything is already configured by create-react-app.

This is why I recommend you start with this. Just install it, bootstrap a project and take a quick look at how App.js is set up. You will see there css imports, component imports and will give you a good if shallow overview of how a modern React project works.

mayk93
  • 1,489
  • 3
  • 17
  • 31
1

This is just done via ordinary ES. For example:

import React, { Component } from 'react'
import './SomeFileWithStyle.css'

The second line imports a CSS file containing, well, CSS code. You are now able to use the classes specified in there. Follow this guide if you need further help: Styling and CSS - React.

Read more about the ES import statement here: import - JavaScript | MDN

OddDev
  • 3,644
  • 5
  • 30
  • 53
1

Import your .css file from the correct path. I struggled with using <link rel="stylesheet" href="css/style.css"> in index.html without any luck. But instead:

index.html:

<link rel="stylesheet" href="/src/css/style.css"/>

style.css:

div.custom-div {
   background-color: red;
}

Now, you can use

<div className="custom-div">
Erik Nguyen
  • 346
  • 2
  • 6
0

You need to use css-loader when creating bundle with wepback.

Install it:

npm install css-loader --save-dev

Read more here

PSCD hp
  • 9
  • 1