webpack - bootstrap-material-design パッケージを webpack に追加するにはどうすればよいですか?

Question

Sassに基づくbootstrap-loaderも使用してwebpackでbootstrap-material-designを追加しようとしていますが、結果はありません。

bower-webpack プラグインを使用してロードできますが、bower パッケージも管理せずに npm を使用してより詳細に制御したいと考えています。

Answer 1

@jkukulが言ったように、そうすべきです：

bootstrap-material-design をインストールします: npm install --save bootstrap-material-design css loader を webpack config に追加します: module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" }, ] }, };

また、 style-loaderおよびcss-loaderパッケージをインストールする必要があります

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

抽出テキスト webpack プラグインを追加します。

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

module.exports の前に次の行を追加します。

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

このパラメーターを module.exports 内に追加します。

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

おそらく、 jQueryの未定義エラーが表示されるでしょう：そのように修正しました

npm i jquery --save

module.exports 内にプラグインを追加します。

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

これが私の webpack.config ファイルの合計です (役立つことを願っています!):

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