After successfully installing bootstrap using the following command:
npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a999edf7e9f7e9f4b8b5a9b1b8f7ef">[email protected]</a> --save
my dependency list now includes:
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
In my styles.scss file, I imported Bootstrap like this:
@import '~bootstrap/scss/bootstrap';
Furthermore, here is a snippet from my webpack configuration:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'build.js'
},
devServer: {
historyApiFallback: true
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader?importLoaders=1&modules&localIdentName=[name]_[local]_[hash:base64:5]',
'sass-loader',
],
}
]
},
plugins: [HtmlWebpackPluginConfig]
}
However, when I apply the container class in my header component:
import React from 'react';
export class Header extends React.Component {
render() {
return(
<header className="container">header here</header>
);
}
}
export default Header;
The display outcome is not as expected:
https://i.sstatic.net/wh8yb.png
Moreover, upon inspection of build.js, I'm unable to locate the .container class, as well as .row, and others.
Examining the contents of bootstrap.scss, the container style appears as follows:
@if $enable-grid-classes {
.container {
@include make-container();
@include make-container-max-widths();
}
}
Additionally, within the _variables.scss file of Bootstrap, the variable is defined as:
$enable-grid-classes: true !default;
So, what could be causing this issue?