Nhập khẩu webpack bootstrap .js và .css

Question

Tôi đang xây dựng một ứng dụng bằng cách sử dụng phản ứng, bootstrap và webpack sử dụng es6 với babel.

Nhưng tôi không thể nhập tệp boostrap.js và bootstrap.cs vào ứng dụng của mình.

webpack.config.js My

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

Vì vậy, trong các tập tin .js của tôi (phản ứng linh kiện) Tôi cố gắng để làm: nhập khẩu 'bootstrap'. Nhưng css không được thực hiện. Nhập khẩu .js hoạt động tốt.

Vậy làm cách nào tôi có thể nhập tăng cường hoặc cấu hình webpack?

Answer 1

Bạn cần phải làm những điều sau đây để làm cho nó làm việc:

1. Trong tập tin cấu hình webpack của bạn, resolve, đảm bảo bootstrap đường dẫn file css của bạn được bao gồm.

Như một ví dụ:

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

Sau đó, trong webpack đối tượng cấu hình của bạn:

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

2. Hãy chắc chắn rằng bạn có nạp phong cách và css nạp. Ví dụ. loaders:[{ test: /\.css$/, loader: "style-loader!css-loader" }]
3. Sử dụng nó trong js bạn nộp require('bootstrap.min.css');

Answer 2

Chỉ cần sử dụng các plugin ít hơn và khai báo đúng ...

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

tôi vẫn đang làm việc trên các JS nhưng tôi sẽ cho bạn biết sớm :-)