How to use Bootstrap 4 and Sass (and jQuery)

[alvipeo]

ok, I'm not a pro neither in webpack nor any of these new shiny 0.x.x version tech YET, so... But just in case someone would need it, here's how I got Bootstrap 4 (alpha now) + sass working:

1. npm install bootstrap-loader --save
2. npm install jquery --save
3. npm install bootstrap@4.0.0-alpha.2 --save
4. npm install css-loader node-sass resolve-url-loader sass-loader style-loader url-loader --save-dev
5. Added autoprefixer to web.config.js (to use with postcss - optional):

    const autoprefixer = require('autoprefixer');

    postcss: [autoprefixer],  // this is inside module.exports object

1. Add loaders to webpack.config.js:

        { test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass'] },
        { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' },
        // Bootstrap 4
        { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' }

1. Add jQuery plugin to webpack.config.js (to plugins array):

        new ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })

1. Add to the end of vendor.ts:

    import 'jquery';
    import 'bootstrap-loader';

1. Add some Bootstrap markup to your home.html to see that it works

Resulting webpack.config.js:

// @AngularClass

/*
 * Helper: root(), and rootDir() are defined at the bottom
 */
var path = require('path');
// Webpack Plugins
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var DefinePlugin = require('webpack/lib/DefinePlugin');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const autoprefixer = require('autoprefixer');

var metadata = {
    title: 'IlgGallery UI',
    baseUrl: '/',
    host: '192.168.1.2',
    port: 3000,
    ENV: ENV
};
/*
 * Config
 */
module.exports = {
    // static data for index.html
    metadata: metadata,
    // for faster builds use 'eval'
    devtool: 'source-map',
    debug: true,

    entry: {
        'vendor': './src/vendor.ts',
        'main': './src/main.ts' // our angular app
    },

    // Config for our build files
    output: {
        path: root('dist'),
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
    },

    resolve: {
        // ensure loader extensions match
        extensions: ['', '.ts', '.js', '.json', '.css', '.html']
    },

    module: {
        preLoaders: [{ test: /\.ts$/, loader: 'tslint-loader', exclude: [/node_modules/] }],
        loaders: [
            // Support for .ts files.
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                query: {
                    'ignoreDiagnostics': [
                        2403, // 2403 -> Subsequent variable declarations
                        2300, // 2300 -> Duplicate identifier
                        2374, // 2374 -> Duplicate number index signature
                        2375  // 2375 -> Duplicate string index signature
                    ]
                },
                exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
            },

            // Support for *.json files.
            { test: /\.json$/, loader: 'json-loader' },

            // Support for CSS as raw text
            { test: /\.css$/, loader: 'raw-loader' },

            // support for .html as raw text
            { test: /\.html$/, loader: 'raw-loader' },

            // if you add a loader include the resolve file extension above

            { test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass'] },
            { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' },
            // Bootstrap 4
            { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' }
        ]
    },

    // sassResources: path.resolve(__dirname, "./node_modules/bootstrap/scss"),

    postcss: [autoprefixer],

    plugins: [
        new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity }),
        // static assets
        new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),
        // generating html
        new HtmlWebpackPlugin({ template: 'src/index.html', inject: false }),
        // replace
        new DefinePlugin({
            'process.env': {
                'ENV': JSON.stringify(metadata.ENV),
                'NODE_ENV': JSON.stringify(metadata.ENV)
            }
        }),
        new ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],

    // Other module loader config
    tslint: {
        emitErrors: false,
        failOnHint: false
    },
    // our Webpack Development Server config
    devServer: {
        port: metadata.port,
        host: metadata.host,
        historyApiFallback: true,
        watchOptions: { aggregateTimeout: 300, poll: 1000 }
    },
    // we need this due to problems with es6-shim
    node: { global: 'window', progress: false, crypto: 'empty', module: false, clearImmediate: false, setImmediate: false }
};

// Helper functions

function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
}

function rootNode(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return root.apply(path, ['node_modules'].concat(args));
}

I haven't changed webpack.prod.config.js so authors could help us out here please.

[PatrickJS]

thanks I added it to the FAQ and in the wiki https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery)

[ackzell]

Hey @alvipeo, thanks a lot for sharing how to do this.

I noticed something (and maybe is that I'm just tired) with a couple of the classes I'm trying to apply, namely btn-success-outline and pull-xs-right, these don't seem to get applied to the elements I am working with. Do you happen to have gone through this as well?

[ackzell]

I figured it out, it is loading Bootstrap version 3, not 4 as I intended.

From https://github.com/shakacode/bootstrap-loader/

You need to have a .bootstraprc that explicitly uses version 4, like so:

https://github.com/shakacode/bootstrap-loader/blob/master/.bootstraprc-4-default

This fixed it for me.

[rvalimaki]

I'm quite sure that I carefully replicated all above steps, and still the production build fails:

c:\path\to\angular2-webpack-starter\node_modules\webpack-md5-hash\plugin\webpack_md5_hash.js:27
var source = chunk.modules.sort(compareModules).map(getModuleSource).reduce(concatenateSource);
^

TypeError: Reduce of empty array with no initial value
at Array.reduce (native)
at Compilation. (C:\fastems\MMS5\MMS_NG\angular2-webpack-starter\node_modules\webpack-md5-hash\plugin\webpack_md5_hash.js:27:82)
at Compilation.applyPlugins (C:\fastems\MMS5\MMS_NG\angular2-webpack-starter\node_modules\webpack\node_modules\tapable\lib\Tapable.js:26:37)

Debug build is working fine, as well as production build without jQuery, SASS & bootstrap.

EDIT: that particular problem was due to missing empty line at the end of vendors.ts file

[Znow]

When following the above guidelines, im getting:

ERROR in Cannot find module 'babel/polyfill'
 @ ./~/bootstrap-loader/loader.js 1:0-44

Tried googling like hell, looking through issues etc, nothing.

[ollwenjones]

@Znow I'm not using this setup, but boostrap 4 is written in ES6, so I'm guessing the babel is a dependency of the bootsrap-loader. You have it npm installed as a dev dependency?

[ackzell]

What version of node are you using @Znow ? I think I upgraded my node version and that fixed it. (you could use something like nvm if you are able to so you avoid the risk of breaking something by upgrading your node)

[Znow]

@ackzell Just updated node to latest, now I get another error:

Along with this in Chrome DevTools:

[ackzell]

@Znow I didn't encounter that, sorry. Maybe removing the node_modules folder and $ npm install again?

[PatrickJS]

Cannot find module is a typescript error where you should provide type definitions for the module. you can also declare the module it as type any. I should probably add a note about this