bootstrap scss with reactjs not adding bootstrap classes

Question

I've installed bootstrap using

npm install [email protected] --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;