v5.3.0-rc.12: Running build-storybook does not include scss files

[liamross]

Describe the bug
When attempting to run build-storybook, it builds successfully, but it does not include any of the scss style files, despite using the @storybook/preset-scss. I have also tried custom webpack setup for scss compiling, but that was also unsuccessful. The site is built, it just has absolutely no style.

It is also a TypeScript environment and has no problem with the TypeScript and tsx files.

It also works perfectly fine when running start-storybook, only build-storybook fails to work with scss files.

To Reproduce
Steps to reproduce the behavior:

1. Run build-storybook
2. Observe the created static site

Expected behavior
Should include style files as css. This worked as intended before converting the files over to main, preview etc.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets

preview.js

import { withInfo } from '@storybook/addon-info';
import { withKnobs } from '@storybook/addon-knobs';
import { addDecorator, addParameters } from '@storybook/react';
import theme from './theme';

// THESE AREN'T WORKING!!!!!
import '../src/index.scss';
import './style.scss';

addDecorator(withInfo(/* Some settings */));
addDecorator(withKnobs);

addParameters({
  options: { panelPosition: 'right', theme },
  docs: { extractComponentDescription: (_c, { info }) => info ? info : null },
});

main.js

const path = require('path');

module.exports = {
  stories: ['../src/components/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-knobs/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-viewport/register',
    '@storybook/addon-docs',
  ],
  presets: [
    '@storybook/preset-scss',
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: { ignoreDiagnostics: [7005] },
        include: [path.resolve(__dirname, '../')],
      },
    },
  ],
};

System:
OS: macOS Mojave 10.14.4
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
Node: 12.13.1 - /usr/local/bin/node
Yarn: 1.19.2 - /usr/local/bin/yarn
npm: 6.12.1 - /usr/local/bin/npm
Browsers:
Chrome: 79.0.3945.117
Safari: 12.1
npmPackages:
@storybook/addon-actions: ^5.3.0-rc.12 => 5.3.0-rc.12
@storybook/addon-docs: ^5.3.0-rc.12 => 5.3.0-rc.12
@storybook/addon-info: ^5.3.0-rc.12 => 5.3.0-rc.12
@storybook/addon-knobs: ^5.3.0-rc.12 => 5.3.0-rc.12
@storybook/addon-viewport: ^5.3.0-rc.12 => 5.3.0-rc.12
@storybook/addons: ^5.3.0-rc.12 => 5.3.0-rc.12
@storybook/preset-scss: ^1.0.2 => 1.0.2
@storybook/preset-typescript: ^1.2.0 => 1.2.0
@storybook/react: ^5.3.0-rc.12 => 5.3.0-rc.12
@storybook/storybook-deployer: ^2.8.1 => 2.8.1

[liamross]

@shilman I managed to fix this, but only by making main.js and preview.js into TypeScript files. I don't know why that worked, I just decided to try it. Not sure if that gives any hints towards what the issue might be. I've been looking through the source code a bit but I'm not super familiar with the code base so haven't had much success.

[shilman]

@liamross That's pretty bizarre -- thanks for letting me know. Labeling as "has workaround" and let's see what other folks say.

[arabold]

I have a similar (?) issue with the 5.3.0 release version that I could pin down to the use of @storybook/preset-create-react-app. It seems that if I use the preset, any customization in my custom webpack config (setting config.module.rules) is ignored and my css isn't imported in the preview.css.

The following works. If I uncomment the "@storybook/preset-create-react-app" preset, the styles are broken and my loaders don't work anymore.

// main.js
const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.(js|jsx|ts|tsx)"],
  addons: [
    // "@storybook/preset-create-react-app",
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-knobs",
    "@storybook/addon-viewport",
  ],
  webpack: async (config, { 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.

    // Add support for 3D objects and materials
    config.module.rules = [
      {
        test: /\.obj$/,
        use: ["file-loader"],
        include: path.resolve(__dirname, "../src"),
      },
      {
        test: /\.mtl$/,
        use: ["file-loader"],
        include: path.resolve(__dirname, "../src"),
      },
      ...config.module.rules,
    ];

    // Return the altered config
    return config;
  },
};

// preview.js
import "normalize.css";

import "../src/index.css";

import { withKnobs } from "@storybook/addon-knobs";
import { addDecorator } from "@storybook/react";

addDecorator(withKnobs);

You think this is related? Otherwise I'll file a separate bug report.

[shilman]

@arabold Thanks! I released @storybook/preset-create-react-app@1.5.1 containing a related fix by @mrmckeb -- can you give that a try?

[arabold]

Tried 5.3.1 and related updates and CSS imports work again. Thank you! However, the WebPack customization is not applied. When using @storybook/preset-create-react-app apparently I cannot register additional rules as shown in my config above.

Here're the versions I'm using:

@storybook/addon-actions                 5.3.1
@storybook/addon-knobs                   5.3.1
@storybook/addon-links                   5.3.1
@storybook/addon-viewport                5.3.1
@storybook/addons                        5.3.1
@storybook/preset-create-react-app       1.5.1
@storybook/react                         5.3.1

[arabold]

Unfortunately I had to update my comment above. While CSS import works as expected now, the WebPack customization seems to be ignored.

[shilman]

@arabold glad it's working again! AFAIK webpack customization is not possible in CRA

[mrmckeb]

@arabold @shilman the preset clears out any customisations that are set before it is loaded, but you should be able to make changes after. It's not something we officially support, but it should work.

If you think this is not working correctly, please raise an issue on the preset (https://github.com/storybookjs/presets/issues/new) with a reproduction and I'll take a look! :)