twitter bootstrap - react - Webpack importar bootstrap.js y.css

react native bootstrap

Question

Estoy creando una aplicación que usa reaccion, bootstrap y webpack usando es6 con babel.

Pero no puedo importar boostrap.js y bootstrap.css a mi aplicación.

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

Así que en mis archivos .js (componentes de reacción) que estoy tratando de hacer: importar ''bootstrap''. Pero el css no está siendo implementado. Las importaciones .js funcionan bien.

Entonces, ¿cómo puedo importar boostrap o configurar webpack?

Answer 1

Necesitas hacer lo siguiente para que funcione:

1. En el archivo de configuración de su paquete web, sección de resolve , asegúrese de que la ruta del archivo css de arranque esté incluida.

Como ejemplo:

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

Luego en su objeto de configuración webpack:

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

2. Asegúrese de que tiene el cargador de estilo y el cargador css. Ej . loaders:[{ test: //.css$/, loader: "style-loader!css-loader" }]
3. Úselo en su archivo js require(''bootstrap.min.css'');

Answer 2

Solo usa el plugin less y decláralos apropiadamente ...

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

Todavía estoy trabajando en el JS pero te avisaré pronto :-)