webpack server doesn't load css stylesheet

Question

I am writing a webpage with ReactJS. I made a css stylesheet to change some bootstrap classes (for my Navbar fonts), added the link to html file, and it did not work. Then I installed style loaders and edited webpack.config file, but again server can't load css file. See below my webpack.config code .

var path = require("path");

var webpack = require('webpack');

var DIST_DIR = path.resolve(__dirname, "dist");

var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.css?/,
                loader: "style-loader!css-loader",
                include: SRC_DIR
            }
        ]
    }
};

module.exports = config;

Status Code for the css file is 404 not found, nothing else. — Suzy Melkonyan
– Suzy Melkonyan, Commented Jul 18, 2017 at 18:43
This is a total shot in the dark, but have you tried to add the css path to the entry section? Check out this post and the answer with 10 upvotes: stackoverflow.com/questions/34963051/webpack-not-loading-css — justDan
– justDan, Commented Jul 18, 2017 at 19:01
what do you mean by "added the link to html file" ? This is not what webpack is meant to. The style-loader will only turn your css into js. You need a plugin to turn it into a "real" css. — Julien TASSIN
– Julien TASSIN, Commented Jul 18, 2017 at 19:06
if the css style sheet is loaded in your index.html via a <link/>, then you don't even need a loader. You would need a loader if you imported your css into your react components. If you're getting a 404 in the browser, then the path to the style sheet is incorrect. — Kyle Richardson
– Kyle Richardson, Commented Jul 18, 2017 at 19:20

Kyle Richardson · Accepted Answer · 2017-07-18 19:34:43Z

3

Having a link such as <link rel="stylesheet" type="text/css" href="/some/path/styles.css"> in your html file does not require a loader in webpack.config.js.

It sounds like you're getting a console error in the browser that says 404 file not found.

If that i the case then the href="/some/path/styles.css" part is not pointing to your file.

Furthermore, I assume, ( I know, dangerous... ) that you are trying to serve your css file from a public folder, and that your server possibly has this folder set as a static asset folder. If that is the case, you do not need to include that folder name in the path you used in the href of your link.

Hope this helps!

answered Jul 18, 2017 at 19:34

Kyle Richardson

5,6553 gold badges20 silver badges40 bronze badges

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

Comments

laktherock · Accepted Answer · 2017-07-19 01:50:48Z

2

All you need to do is explicitly require CSS or Sass dependencies like you would its JS dependencies, and Webpack will build a bundle that includes everything you need. For Example

src/app/index.js

import 'bootstrap/dist/css/bootstrap.css'; //bootstrap installed via npm
import '../css/custom.css'; // just an example path

For more detail explanation Webpack Embedded Stylesheets

answered Jul 19, 2017 at 1:50

laktherock

4294 silver badges19 bronze badges

Collectives™ on Stack Overflow

webpack server doesn't load css stylesheet

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