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, Jul 18 '17 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: https://stackoverflow.com/questions/34963051/webpack-not-loading-css — justDan, Jul 18 '17 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, Jul 18 '17 at 19:06
if the css style sheet is loaded in your index.html via a ``, 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, Jul 18 '17 at 19:20

score 3 · Accepted Answer · answered Jul 18 '17 at 19:34

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!

score 2 · Answer 2 · answered Jul 19 '17 at 01:50

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

webpack server doesn't load css stylesheet

2 Answers2