Currently, I am working on creating a webpage using ReactJS. I encountered an issue where the css stylesheet I created to modify some bootstrap classes (specifically for my Navbar fonts) was not being applied when linked in the html file. To troubleshoot this problem, I decided to install style loaders and make edits to the webpack.config file. However, even after these changes, the server still struggled to load the css file. Please refer to the webpack.config code below.
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;