Webpack 导入 bootstrap .js 和 .css [英] Webpack import bootstrap .js and .css

问题描述

我正在使用带有 babel 的 es6 和 react、bootstrap 和 webpack 构建一个应用程序.

I am building an app using react, bootstrap and webpack using es6 with babel.

但我无法将 boostrap.js 和 bootstrap.css 导入我的应用.

But I can't import boostrap.js and bootstrap.css to my app.

我的 webpack.config.js

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

所以在我的 .js 文件(反应组件)中，我试图做:导入引导程序".但是css没有被实现..js 导入效果很好.

So in my .js files (react components) I am trying to do: import 'bootstrap'. But the css is not being implemented. The .js imports works well.

那么如何导入 boostrap 或配置 webpack?

So how can I import boostrap or configure webpack?

推荐答案

您需要做以下事情才能使其工作:

You need to do the following things to make it work:

1. 在您的 webpack 配置文件的 resolve 部分，确保包含您的引导 css 文件路径.

1. In your webpack config file, resolve section, make sure your bootstrap css file path is included.

举个例子:

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

然后在你的 webpack 配置对象中:

Then in your webpack config object:

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

1. 确保你有样式加载器和 css 加载器.例如.loaders:[{ test:/\.css$/, loader: "style-loader!css-loader" }]
2. 在你的 js 文件中使用它require('bootstrap.min.css');

这篇关于Webpack 导入 bootstrap .js 和 .css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！