Storybook: Unable to extend my webpack config

[TomYeoman]

Issue details

Storybook is saying I don't have a CSS loader after attempting to extend the webpack config to allow for SASS in addition to CSS. It seems my webpack is getting overritten rather than extended

Steps to reproduce

add .storybook/webpack.config.js with the following code

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../")
    }
    ]
  }
};

I've tried manually adding the cssLoader

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../")
    },
    {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        include: path.resolve(__dirname, "../")
      }
    ]
  }
};

But then recieve this new error

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

"@storybook/react": "^3.3.2",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",

Affected platforms

Windows 10

[ndelangen]

This might be what you need:
https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode

[TomYeoman]

@ndelangen thanks for the speedy response!

That certainly looks like it would achieve what i'd be after, however i'm still experiencing the same error about needing a CSS loader after using that code aswell

webpack.config.js

const path = require("path");

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, configType) => {
  // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  storybookBaseConfig.module.rules.push({
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    include: path.resolve(__dirname, "../")
  });

  // Return the altered config
  return storybookBaseConfig;
};

Error

Again the CSS loads fine without that webpack.config.js

E/ I've just done a bit more investigating, seems the CSS loader breaks even when I don't modify anything

E.g

const path = require("path");

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, configType) => {
  console.log(JSON.stringify(storybookBaseConfig, null, 4));
  // Return the altered config
  return storybookBaseConfig;
};

The log does actually return me a webpack config as expected

{
    "devtool": "cheap-module-source-map",
    "entry": {
        "manager": [
            "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\@storybook\\react\\dist\\server\\config\\polyfills.js",
            "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\.storybook\\addons.js",
            "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\@storybook\\react\\dist\\client\\manager\\index.js"
        ],
        "preview": [
            "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\@storybook\\react\\dist\\server\\config\\polyfills.js",
            "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\@storybook\\react\\dist\\server\\config\\globals.js",
            "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\webpack-hot-middleware\\client.js?reload=true",
            "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\.storybook\\config.js"
        ]
    },
    "output": {
        "path": "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\@storybook\\react\\dist\\server\\config\\dist",
        "filename": "static/[name].bundle.js",
        "publicPath": "/"
    },
    "plugins": [
        {
            "options": {
                "template": "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\@storybook\\react\\dist\\server\\index.html.ejs",
                "filename": "index.html",
                "hash": false,
                "inject": true,
                "compile": true,
                "favicon": false,
                "minify": false,
                "cache": true,
                "showErrors": true,
                "chunks": [
                    "manager"
                ],
                "excludeChunks": [],
                "title": "Webpack App",
                "xhtml": false,
                "data": {
                    "managerHead": "",
                    "version": "3.3.2"
                }
            }
        },
        {
            "options": {
                "template": "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\@storybook\\react\\dist\\server\\iframe.html.ejs",
                "filename": "iframe.html",
                "hash": false,
                "inject": true,
                "compile": true,
                "favicon": false,
                "minify": false,
                "cache": true,
                "showErrors": true,
                "chunks": "all",
                "excludeChunks": [
                    "manager"
                ],
                "title": "Webpack App",
                "xhtml": false,
                "data": {
                    "previewHead": ""
                }
            }
        },
        {
            "definitions": {
                "process.env": {
                    "NODE_ENV": "\"development\"",
                    "PUBLIC_URL": "\"\"",
                    "STORYBOOK_GIT_BRANCH": "\"master\"",
                    "STORYBOOK_GIT_ORIGIN": "\"\""
                }
            }
        },
        {
            "options": {},
            "fullBuildTimeout": 200,
            "requestTimeout": 10000
        },
        {
            "options": {},
            "pathCache": {},
            "fsOperations": 0,
            "primed": false
        },
        {
            "nodeModulesPath": "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules"
        },
        {},
        {
            "definitions": {}
        }
    ],
    "module": {
        "rules": [
            {
                "test": {},
                "loader": "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\@storybook\\react\\node_modules\\babel-loader\\lib\\index.js",
                "query": {
                    "cacheDirectory": "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\.cache\\react-storybook",
                    "babelrc": false,
                    "presets": [
                        [
                            "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\babel-preset-env\\lib\\index.js",
                            {
                                "targets": {
                                    "browsers": [
                                        "last 2 versions",
                                        "safari >= 7"
                                    ]
                                },
                                "modules": false
                            }
                        ],
                        "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\babel-preset-stage-0\\lib\\index.js",
                        "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\babel-preset-react\\lib\\index.js"
                    ],
                    "plugins": [
                        "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\babel-plugin-transform-regenerator\\lib\\index.js",
                        [
                            "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\babel-plugin-transform-runtime\\lib\\index.js",
                            {
                                "helpers": true,
                                "polyfill": true,
                                "regenerator": true
                            }
                        ],
                        [
                            "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules\\babel-plugin-react-docgen\\lib\\index.js",
                            {
                                "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES"
                            }
                        ]
                    ]
                },
                "include": [
                    "C:\\Users\\yoers\\Documents\\git\\trading_site\\client"
                ],
                "exclude": [
                    "C:\\Users\\yoers\\Documents\\git\\trading_site\\client\\node_modules"
                ]
            },
            {
                "test": {},
                "use": [
                    {
                        "loader": "html-loader"
                    },
                    {
                        "loader": "markdown-loader"
                    }
                ]
            }
        ]
    },
    "resolve": {
        "extensions": [
            ".js",
            ".json",
            ".jsx"
        ],
        "modules": [
            "node_modules"
        ]
    },
    "performance": {
        "hints": false
    }
}

This alone is breaking my CSS loading

[ndelangen]

the logged webpack config IS missing the css loaders..

[psimyn]

@TomYeoman it is failing to load a .css file because your loader is only configured for .scss files.

change test: /\.scss$/, to test: /\.s?css$/,

edit: missed your earlier comment.

[nimadera]

@TomYeoman, assuming you're using Material UI, wrapping the component in <MuiThemeProvider> within Storybook should get rid of the "Cannot read property 'prepareStyles' of undefined" error.

[hollandmatt]

FWIW, this is how I managed to accomplish adding a loader to the default webpack config: https://gist.github.com/hollandmatt/eae06135edc5cbfa6668d99a5333cc53

// this is a function that returns a Webpack config
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
  // get the standard storybook webpack.config.js
  const config = genDefaultConfig(baseConfig);

  // add our custom loaders - or anything else that's needed
  config.module.rules.unshift({
    test: /\.png$/,
    include: path.resolve(__dirname, '../'),
    loader: require.resolve('ignore-loader')
  });

  return config;
};