Importing CSS only in Storybook

[mgarf]

This is an unusual use case but I'm trying to import the css only for use in the storybook. Currently this is what I have:

Config.js

import { configure } from '@kadira/storybook';
require('../node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css');

function loadStories() {
  require('../components/stories/StandardInput');
  // require as many stories as you need.
}

configure(loadStories, module);

webpack.config.js

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

I'm getting the following error:

ERROR in Loader C:\Users******\Desktop\JSApp\node_modules\raw\raw.js didn't return a function
@ ./~/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css 4:14-119 13:2-17:4 14:20-125

[arunoda]

May be remove the css loader. That may help.

[arunoda]

Also, you should try to do following changes.

• include should be this: include: path.resolve(__dirname, '../')
• CSS import should be like as follow:

import '@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css'

[mgarf]

thank you for your quick response.

I made the changes you suggested but still getting the following:

ERROR in Loader C:\Users\michael.garfinkel\Desktop\JSApp\node_modules\raw\raw.js didn't return a function
 @ ./~/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css 4:14-92 13:2-17:4 14:20-98

Updated Bits:

webpack.config.js

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

config.js

import { configure } from '@kadira/storybook';
import '@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css';

function loadStories() {
    require('../components/stories/StandardInput');
    require('../components/stories/BillingStatementRow');
  // require as many stories as you need.
}

configure(loadStories, module);

[arunoda]

May be seems like an issue in the raw module. Make sure you've installed raw npm module into your app. (It's version should be something like: 0.5.1)

[arunoda]

This is a similar project you can use as a reference: https://github.com/kadira-samples/react-storybook-demo/tree/master/.storybook

[mgarf]

Yeah,

I just looked into my package json and raw was missing. I think i had raw in but not raw-loader. Once i did that it all worked. Thank you for your help!

[arunoda]

Great.