bootstrap scss with reactjs not adding bootstrap classes - css

Question

I've installed bootstrap using
npm install bootstrap#4.0.0-alpha.6 --save
in my dependencies I have:
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
in my styles.scss
#import '~bootstrap/scss/bootstrap';
and here's my webpack file:
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]
}
but when I add 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;
it looks like this:
and in build.js I can't find .container class. .row as well etc.
inside bootstrap.scss>>import grid container looks this:
#if $enable-grid-classes {
.container {
#include make-container();
#include make-container-max-widths();
}
}
and in _variables.scss inside bootstrap this variable is true
$enable-grid-classes: true !default;
so what's wrong?

Answer 1

You have to import your .scss file in your component and apply in html. Like:
import React from 'react';
import styles from './styles.scss'; // your .scss file
export class Header extends React.Component {
render() {
return(
<header className={styles.container}>header here</header>
);
}
}
export default Header;