Pakiety stron WWW importują bootstrap .js i .css

Question

Buduję aplikację za pomocą reagowania, bootstrapu i pakietu internetowego za pomocą es6 z babel.

Ale nie mogę zaimportować boostrap.js i bootstrap.css do mojej aplikacji.

Moi 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 
    } 
}; 

więc w moich plikach .js (reagują komponenty) Próbuję zrobić: import 'bootstrap'. Ale css nie jest wdrażany. Import .js działa dobrze.

Jak mogę importować boostrap lub skonfigurować pakiet sieci Web?

Answer 1

trzeba wykonać następujące czynności, aby to działało:

1. W pliku konfiguracyjnym WebPACK, resolve sekcję, upewnij się, że ścieżka do pliku css bootstrap jest włączone.

Jako przykład:

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

Następnie w WebPACK config obiektu:

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

2. Upewnij się, że ładowarka stylu oraz ładowarka css. Na przykład. loaders:[{ test: /\.css$/, loader: "style-loader!css-loader" }]
3. używać go w pliku js require('bootstrap.min.css');

Answer 2

Wystarczy użyć mniej wtyczki i zadeklarować je prawidłowo ...

// 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'; 

Ja nadal pracuje na JS, ale Ja was niech wkrótce się dowiem :-)