How can I add the bootstrap-material-design package into webpack?

Question

Im trying to add the bootstrap-material-design with webpack using also the bootstrap-loader based on Sass, but without results.

I can load it using bower-webpack plugin, but I want to have more control of it using npm without manage bower packages as well.

Answer 1

yep, you should do, as @jkukul said:

Install bootstrap-material-design: npm install --save bootstrap-material-design Add css loader to your webpack config: module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" }, ] }, };

also, you should install style-loader and css-loader packages

 npm install style-loader css-loader --save-dev

and add extract text webpack plugin:

npm i extract-text-webpack-plugin --save

add this line before module.exports:

var ExtractTextPlugin = require ('extract-text-webpack-plugin');

and add this param inside module.exports:

styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader')

probably, it would appear jQuery undefined error : I fixed it that way

npm i jquery --save

and add plugins inside module.exports:

plugins: [
     new webpack.ProvidePlugin({
     $: "jquery",
     jQuery: "jquery"
})]

here is my total webpack.config file (hope it will be helpful!):

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require ('extract-text-webpack-plugin');

module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader'),
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
    ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
         $: "jquery",
         jQuery: "jquery"
    })

  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    },
    {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }

  ],
  resolve: {
    extensions: ['', '.js', '.jsx','.css'],
    modulesDirectories: ['node_modules']
  }
  }
};

Answer 2

Try following steps.

Install bootstrap-material-design:

npm install --save bootstrap-material-design

Add css loader to your webpack config:

module.exports = {
 module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
    ]
  },
};

In your webpack's entry file add:

require('bootstrap-material-design/dist/css/bootstrap-material-design.css')