Constructing a React 16.4.0 application with Bootstrap 4.1.1.
My approach involves using css-loader alongside webpack to generate personalized stylesheets for each component within my app.
Despite my efforts, I am facing the issue where my custom styles are not being applied. Initially, I suspected that the problem stemmed from Bootstrap's styles taking precedence. However, even when incorporating an element that exists independently of any Bootstrap styling, my custom styles fail to manifest.
As illustrated in the following example:
Sidebar.js component:
import React from 'react';
import classes from './Sidebar.css';
const sidebar = (props) => {
console.log('classes.red:', classes.red);
return (
<div>
<h3 className={classes.other}>Testing Stylesheet</h3>
<nav className="col-sm-3 col-md-2 hidded-xs-down sidebar" id={classes.red}>
<ul className="nav flex-column">
<li className="nav-item">
<a className="nav-link active" href="#">
FF1493
</a>
</li>
<li className="nav-item">
<a className="nav-link active" href="#">
FF4500
</a>
</li>
</ul>
</nav>
</div>
)
}
export default sidebar;
Here is the straightforward stylesheet utilized:
#red {
background-color: rgba(214, 21, 21, 0.842)
}
.other {
color: green;
}
Within Sidebar.js, the imported 'red' style is logged via console. The browser's console outputs the following: classes.red: Sidebar__red__2-sUP, correctly displaying the unique identifier.
For those who may require additional information, below is my webpack configuration:
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const SRC_DIR = path.join(__dirname, '/client/src');
const DIST_DIR = path.join(__dirname, '/client/dist');
module.exports = {
entry: `${SRC_DIR}/index.jsx`,
output: {
path: path.resolve(__dirname, 'client/dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.jsx?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
plugins: ['syntax-dynamic-import'],
},
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
],
flexbox: 'no-2009',
}),
],
},
},
],
}
)
)
},
],
},
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
},
}),
new ExtractTextPlugin("styles.css"),
],
};
Could the omission of certain elements in webpack.config, such as sourceMap: shouldUseSourceMap, under options and extractTextPluginOptions, be contributing to the issue at hand?
I commented out these sections while configuring webpack due to encountering errors during setup and lacking clarity on their specific functions. As I continue to familiarize myself with webpack, I incorporated some configuration settings from a previous project developed using Facebook's create-react-app.
Your insights and suggestions would be greatly appreciated. Thank you in advance! Mike