Webpack import bootstrap .js und .css

Question

Ich baue eine App mit react, bootstrap und webpack mit es6 mit babel.

Aber ich kann nicht Boosterrap.js und Bootstrap.css zu meiner App importieren.

Mein webpack.config.js

var webpack = require('webpack'), 
    HtmlWebpackPlugin = require('html-webpack-plugin'), 
    path = require('path'), 
    srcPath = path.join(__dirname, 'src'); 

module.exports = { 
    target: 'web', 
    cache: true, 
    entry: { 
    module: path.join(srcPath, 'module.js'), 
    common: ['react', 'react-router', 'alt'] 
    }, 
    resolve: { 
    root: srcPath, 
    extensions: ['', '.js'], 
    modulesDirectories: ['node_modules', 'src'] 
    }, 
    output: { 
    path: path.join(__dirname, 'tmp'), 
    publicPath: '', 
    filename: '[name].js', 
    library: ['Example', '[name]'], 
    pathInfo: true 
    }, 

    module: { 
    loaders: [ 
     {test: /\.js?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'} 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('common', 'common.js'), 
    new HtmlWebpackPlugin({ 
     inject: true, 
     template: 'src/index.html' 
    }), 
    new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
    }), 
    new webpack.ProvidePlugin({ 
      bootstrap: "bootstrap.css", 
    }), 
    new webpack.NoErrorsPlugin() 
    ], 

    debug: true, 
    devtool: 'eval-cheap-module-source-map', 
    devServer: { 
    contentBase: './tmp', 
    historyApiFallback: true 
    } 
}; 

Also in meinen Js-Dateien (reagieren Komponenten) Ich versuche zu tun: 'Bootstrap' importieren. Aber das CSS wird nicht implementiert. Der Import von .js funktioniert gut.

Also, wie kann ich Bootrap importieren oder Webpack konfigurieren?

Answer 1

Sie müssen die folgenden Dinge tun, damit es funktioniert:

1. In Ihrer webpack Konfigurationsdatei, resolve Abschnitt, stellen Sie sicher, dass der Bootstrap CSS-Datei-Pfad enthalten.

Als Beispiel:

var bootstrapPath = path.join(
    __dirname, 
    'development/bower_components/bootstrap/dist/css' 
); 

Dann in Ihrem webpack Config Objekt:

resolve: { 
    alias: { 
     jquery: path.join(__dirname, 'development/bower_components/jquery/jquery') 
    }, 
    root: srcPath, 
    extensions: ['', '.js', '.css'], 
    modulesDirectories: ['node_modules', srcPath, commonStylePath, bootstrapPath] 
} 

2. Stellen Sie sicher, Stil loader und CSS-Loader haben. Z.B. loaders:[{ test: /\.css$/, loader: "style-loader!css-loader" }]
3. es in Ihrem js verwenden require('bootstrap.min.css');

Answer 2

einfach die weniger Plugin sie verwenden Datei richtig und erklären ...

// Webpack file 
{ 
    test: /\.less$/, 
    loader: "style-loader!css-loader!less-loader" 
}, 
// I have to add the regex .*? because some of the files are named like... fontello.woff2?952370 
{ 
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*)?$/, 
    loader: 'url?limit=50000' 
} 

// Less file 
@import '~bootstrap/less/bootstrap'; 

ich noch auf der JS arbeite, aber ich werde Sie lassen bald wissen :-)