Storybook: Meteor CSS not importing

[zeroasterisk]

I'm following your docs/guide for CSS importing, from a Meteor app, and I am not getting the CSS into React Storybook, but it is in my Meteor app... and both are running at the same time.

$ npm -v && node -v
3.8.5
v4.2.1
$ npm install --save-dev style-loader raw-loader

// .storybook/webpack.config.js
const path = require('path');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
}

// .storybook/config.js
import { configure } from '@kadira/storybook';

function loadStories() {
  require('../imports/ui/layouts/stories/Header.jsx');
  require('../imports/ui/layouts/stories/Footer.jsx');
}

configure(loadStories, module);

React Storybook has no CSS files loading via Chrome Inspector Network.

[arunoda]

See here: https://github.com/mantrajs/mantra-sample-blog-app/blob/master/client/modules/core/components/.stories/index.js#L1

You need to import CSS inside the story files. You can also done that with config.js as well.

[zeroasterisk]

OK great, thanks... Will that work for '.less' files too? How about module loaded frameworks like bootstrap?

[arunoda]

For the less, you need to configure a less webpack loader.
In the boostrap case it doesnt work. You may can directly i
pory such bootstrap in the config.js with a help of a NPM bootstrap library.

[ffxsam]

I came here for the same issue - trying to use SCSS with React Storybook.
https://forums.meteor.com/t/react-storybook-how-to-get-styling/21496

Is webpack the only solution?

[arunoda]

@ffxsam Yep. That's the only way which supports hot loading.

[zeroasterisk]

Ok I finally got this working last night... thought I'd share.

Webpack builder + bootstrap + font-awesome + meteor .css files (need to change to .less builder soon)

This isn't perfect, and I think I might be duplicating effort a bit, but it's at least working.

// .storybook/webpack.config.js
const path = require('path');

module.exports = {
  entry: [
    'bootstrap-webpack!' + path.resolve(__dirname, './bootstrap.config.js'),
    'font-awesome-webpack!' + path.resolve(__dirname, './font-awesome.config.js')
  ],
  output: {
    path: path.join(__dirname, '../public'),
    filename: 'webpack-output.js'
  },
  //resolveLoader: { root: path.resolve(__dirname, '../node_modules') },
  module: {
    loaders: [
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: path.resolve(__dirname, '../')
      },
      { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
      { test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,   loader: 'file-loader?limit=10000&mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: 'file-loader?limit=10000&mimetype=application/octet-stream' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: 'file' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: 'file-loader?limit=10000&mimetype=image/svg+xml' }
    ]
  }
};

// .storybook/config.js
import { configure } from '@kadira/storybook';

function loadStories() {
  require('bootstrap-webpack');
  require('font-awesome-webpack');
  require('../imports/ui/layouts/stories/Header.jsx'); // <-- includes app css
  ...
}

// .storybook/font-awesome.config.js
module.exports = {
  // Default for the style loading
  styleLoader: 'style-loader!css-loader!less-loader',

  styles: {
    'mixins': true,
    'bordered-pulled': true,
    'core': true,
    'fixed-width': true,
    'icons': true,
    'larger': true,
    'list': true,
    'path': true,
    'rotated-flipped': true,
    'animated': true,
    'stacked': true
  }
};

// .storybook/font-awesome.config.js
module.exports = {
  scripts: {
    // add every bootstrap script you need
    'transition': true
  },
  styles: {
    // add every bootstrap style you need
    'mixins': true,
    'normalize': true,
    'print': true,
    'scaffolding': true,
    'type': true
  }
};

[ffxsam]

Boggles my mind why people like webpack so much.. ugh. All that, just to get everything working?

@arunoda I would recommend maybe adding a webpack config to the package so that Sass & LESS work out of the box, as I'm willing to bet there are lots of projects that don't use plain CSS.

[arunoda]

We can add a link to above when we are talking about CSS in Meteor. We won't bundle anything default related to CSS with Storybook.

I hope that's the best way.

[ffxsam]

Ok, but even if you can have webpack boilerplate that we can copy/paste that will make CSS, Sass, and LESS work.. that would be awesome. Because lots of Meteor folks like myself haven't had a need to use webpack thanks to Meteor's build system, and the learning curve for webpack is _massive_. I know I don't have the time to invest in learning it.

[arunoda]

@ffxsam Yes. We can simply put it there.

[ffxsam]

Many thanks! 😀

[arunoda]

@ffxsam BTW: Send me a PR, if you can do if before me.
I suggest to create a gist with the boileplate and link it with other info.

[ffxsam]

Love to, but I don't know webpack - sorry!

[ickyrr]

@zeroasterisk Thank you! That solved my problem.

[arunoda]

We will use this or similar by default. We'll work on this with our new tool getstorybook. Closing this and moving the discussion here: https://github.com/kadirahq/getstorybook/issues/1