3

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.

2 Answers 2

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']
  }
  }
};

Sign up to request clarification or add additional context in comments.

Comments

1

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')

1 Comment

Do you know how to include sass version of this package?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.