Bootstrap not imported

Hi there,

in my project I’m using bootstrap--loader within the entry configuration, in storybook I have:

import { configure } from '@kadira/storybook';
import 'bootstrap-loader';

function loadStories() {
  require('../src/views/visualization/widgets/widget-container/react-component-stories.jsx');
  require('../src/views/visualization/widgets/horizontal-data/react-component-stories.jsx');
}

configure(loadStories, module);

and

const path = require('path');
const paths = {
  root: __dirname,
  src: path.join(__dirname, '..', 'src'),
  build: path.join(__dirname, '..', 'dist'),
  static: path.join(__dirname, '..', 'static'),
  node_modules: path.join(__dirname, '..', 'node_modules')
};
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    loaders: [
      { test: /\.less$/, loader: `style!css?root=${paths.static}&sourceMap&importLoaders=2&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap` },
      { test: /\.scss$/, loader: `style!css?root=${paths.static}&sourceMap&importLoaders=2&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap` },
      { test: /\.css$/, loader: `style!css?root=${paths.static}&sourceMap&importLoaders=2&localIdentName=[local]___[hash:base64:5]` },
      { test: /\.sass$/, loader: `style!css?root=${paths.static}&sourceMap&importLoaders=2&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap&indentedSyntax` },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?limit=10000&mimetype=application/font-woff&name=assets/fonts/[name]-[hash].[ext]' },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?limit=10000&mimetype=application/font-woff&name=assets/fonts/[name]-[hash].[ext]' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?limit=10000&mimetype=application/octet-stream&name=assets/fonts/[name]-[hash].[ext]' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?name=assets/fonts/[name]-[hash].[ext]' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?limit=10000&mimetype=image/svg+xml&name=assets/images/[name]-[hash].[ext]' },
      { test: /\.(png|jpg|gif)$/, loader: 'file?name=assets/images/[name]-[hash].[ext]' }
    ]
  },
  resolve: {
    modulesDirectories: ['src', 'node_modules'],
    extensions: ['', '.json', '.js', '.jsx'],
    root: [paths.src, paths.static]
  },
  plugins: [
    new ExtractTextPlugin('assets/stylesheets/[name]-[chunkhash].css', { allChunks: true })
  ]
};
``

but still, no errors and bootstrap isn't included, is there anything else I need to do to include it?

In the css guide it says just to require it in `config.js``

[michael-martin]

For anyone that comes back to this later, I’ve got it working by:

• Add bootstrap-loader as an entry point to Storybook’s webpack.config.js
• Import it in config.js as @alex88 did.

Full webpack.config.js (Mostly just the CSS loaders from React Redux Starter Kit):

const path = require('path');

const BASE_CSS_LOADER = 'css?sourceMap&-minimize';

module.exports = {
  module: {
    entry: {
      app: ['bootstrap-loader']
    },
    loaders: [
      {
        test: /\.scss$/,
        loaders: [
          'style',
          BASE_CSS_LOADER,
          'postcss',
          'sass?sourceMap'
        ]
      },
      {
        test: /\.css?$/,
        loaders: [
          'style',
          BASE_CSS_LOADER,
          'postcss'
        ],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
}

And then in storybook/config.js:

import 'bootstrap-loader';

[gkaran]

Had the same issue but adding the following loader solved the issue with jQuery for me:

{
  test: /bootstrap-sass(\\|\/)assets(\\|\/)javascripts(\\|\/)/,
  loader: 'imports?jQuery=jquery'
}

You also need to install the imports-loader package.