How to add styling to a React project

Question

So I've written a really simple React app, but didn't use the create-react-app setup. I wanted to learn on my own how something like CRA actually gets built. I basically just used webpack to build and bundle my React app. Currently, I have a Babel loader to translate my React/JSX, and an "html-loader", for my HTML I guess (I read a tutorial for Webpack that said I needed it, but I still don't understand why I have to translate my HTML? It's HTML, what does it even translate to)?

My project currently has no CSS styling yet, and I want to learn how to add it. But I'm confused as to what loaders I should use. I'm pretty sure I'll need a Less loader for my .less files, but the Less loader compiles Less to CSS. So would I then need a CSS loader for the compiled less files? And then would I need a style loader for the CSS?

Read this it will be quite helpful. medium.freecodecamp.org/… — Farhan Tahir
– Farhan Tahir, Commented May 4, 2018 at 14:20
After going through the Medium post, I'm only slightly confused now. I get that I'll probably need a Less, CSS, and style loader, but now I don't properly understand how to render the styles and stuff. So am I supposed to just import CSS into React components and include it as an attribute into every component I write? Would I need to link the .less stylesheet into my index.html file? — albert
– albert, Commented May 4, 2018 at 18:04

Hamza El Aoutar · Accepted Answer · 2018-05-04 14:23:16Z

3

You will need the following loaders :

style-loader
css-loader
less-loader

So basically a webpack config as follow :

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                {
                 loader: "style-loader"
                }, 
                {
                 loader: "css-loader"
                }, 
                {
                 loader: "less-loader"
                }
            ]
        }
    ]
}

Check this answer to know what each loader does.

answered May 4, 2018 at 14:23

Hamza El Aoutar

5,6873 gold badges20 silver badges25 bronze badges

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

Comments

Charles Chazz Sohier · Accepted Answer · 2018-05-04 14:43:39Z

0

You might want to consider https://www.styled-components.com/. This library allows you to locate your stylesheet alongside with your react components. If I am correct, using this library won't change your current webpack config.

If you want a more "traditional" approach for styling your react application, you will need at least two loaders for your webpack config: style-loader and css-loader.

less and sass loaders will be required if you intend to use css-preprocessors though.

answered May 4, 2018 at 14:43

Charles Chazz Sohier

1014 bronze badges

Collectives™ on Stack Overflow

How to add styling to a React project

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related