Addng css files in React project with Webpack 4

Question

I am building a simple React app from scratch using Webpack. I was finally able to run the dev server and when I tried to apply some styles via CSS, the files wouldn't load and I assume my Webpack 4 configuration is not right.

Here is the code:

webpack.config.js

// const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const path = require('path');


module.exports = {
    mode: 'development',
    entry: ['./src/index.js'],
    resolve: {
        extensions: [".js", ".jsx"]
    },
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/dist',
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8080
    },
    module: {
        rules: [
            {
                test: /\.js|.jsx$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["react"]
                }

            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader'
            }
        ]
    },

};

My project structure is like this, I will include only src because it lives in the root:

 **src**
      |_assets
      |_componentns
      |_styles
        |_App.css
        |_index.css
      App.jsx
      index.js
      index.html

I would like to be able to add multiple css files for each component I have and apply them, and to be able to style the index the index.html. Thank you very much for your help.

Are the css files injected into style tags in html? Try inspecting that... — Praveenkumar Kalidass
– Praveenkumar Kalidass, Commented Jan 30, 2019 at 7:27

Pang · Accepted Answer · 2019-02-25 06:26:53Z

2

Your webpack configuration looks fine. make sure you import the required css files in your components.

import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <Child />
      </div>
    );
  }
}

edited Feb 25, 2019 at 6:26

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jan 30, 2019 at 7:21

Roopak Puthenveettil

1,5052 gold badges14 silver badges28 bronze badges

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

1 Comment

squeekyDave Over a year ago

I do that but still nothing shows. I will update the code.

Faizan Virani · Accepted Answer · 2020-10-12 18:08:35Z

1

All you have to do is import the CSS files when needed as you would a JavaScript module. So if you want to have a style sheet for your whole application, you can import a global stylesheet in your index.js.

import './styles/index.css';

and you can do the same for each component with specific styles

import './styles/App.css'

in which case you might want to setup CSS modules to avoid overlapping class names.

edited Oct 12, 2020 at 18:08

answered Jan 30, 2019 at 7:25

Faizan Virani

1791 silver badge11 bronze badges

1 Comment

squeekyDave Over a year ago

I have already done that, still not working and there are no erros :/

squeekyDave · Accepted Answer · 2019-01-30 10:24:54Z

1

Ok, rookie mistake here, the way I ahve set up webpack is I have to build it first and then run the dev server, no the other way around. All answers above are valid and helpful, I just forgot to run build after changes.

answered Jan 30, 2019 at 10:24

squeekyDave

9723 gold badges17 silver badges35 bronze badges

Collectives™ on Stack Overflow

Addng css files in React project with Webpack 4

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related