Storybook: css not injected to components in storybook

Created on 11 Sep 2018 · 5Comments · Source: storybookjs/storybook

If you are reporting a bug or requesting support, start here:

Bug or support request summary

I use style loader, css loader, sass loader in my webpack config for storybook. My component in storybook does not have styles

Steps to reproduce

I use React with SASS. This is my webpack config

const path = require('path')
const autoprefixer = require('autoprefixer')
const postcssNormalize = require('postcss-normalize')

const srcPath = path.resolve(__dirname, '../../../app/src')

module.exports = {
  module: {
    rules: [
            {
                test: /\.scss$/,
                use: [
                                          {
                                                 loader: 'style-loader'
                                          },
                    {
                        loader: "css-loader",
                            options: {
                                sourceMap: true
                            }
                    }, 
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [autoprefixer, postcssNormalize],
                                sourceMap: true
                            },
                        },
                        {
                            loader: 'resolve-url-loader'
                    }, 
                    {
                        loader: "sass-loader",
                        options: {
                            includePaths: [srcPath],
                                sourceMap: true
                            }
                        }
                    ]   
                })      
            },
            {
                test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|woff|woff2)(\?.*)?$/,
                exclude: /node_modules/,
                loader: 'file-loader',
                options: {
                    name: '[path][name]-[hash].[ext]',
                    outputPath: 'images/'
                },
            }
        ]
    }
};

Please specify which version of Storybook and optionally any affected addons that you're running

@storybook/react 3.4.10
@storybook/addons 3.4.10

Affected platforms

_If UI related, please indicate browser, OS, and version_
_If dependency related, please include relevant version numbers_
_If developer tooling related, please include the platform information_

Screenshots / Screencast / Code Snippets (Optional)

// code here

End bug report support request - delete the rest below

If you are creating a issue to track work to be completed, start here:

Work summary

_Please provide a description of the work to be completed here - Include some context as to why something needs to be done and link any related tickets._

Where to start

_Please list the file(s) a contributor needs to figure out where to start work and include any docs or tutorials that may be applicable._

Acceptance criteria

_Please include a checklist of the requirements necessary to close this ticket. The work should be narrowly scoped and limited to a few hours worth by an experienced developer at the most._

Who to contact

_Add yourself and/or people who are familiar with the code changes and requirements. These people should be able to review the completed code._
End work issue - please tag this issue with the correct status and type labels

compatibility with other tools question / support

Source