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. https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75 — Farhan Tahir, May 04 '18 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, May 04 '18 at 18:04

score 3 · Accepted Answer · answered May 04 '18 at 14:23

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.

score 0 · Answer 2 · answered May 04 '18 at 14:43

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.

How to add styling to a React project

2 Answers2