Storybook - Support

[omariosouto]

Hi, how are you all?

I was creating a new setup with https://github.com/storybooks/storybook, and when I Include an stylus file the storybook can`t read the file because they need to add an extension for webpack for make everything work.

How could I implement this?

[frankstallone]

If I remember correctly, you need to do this via Storybook's Extend Mode.

[fgvicente]

You could pass an example of the webpack.config. I can not make me recognize the scss styles

[frankstallone]

I think your asking me for an example @fgvicente? If so here is my current .storybook/webpack.config.js. This works with my TypeScript, loads my static folder files appropriately and compiles my SCSS.

// load the default config generator.
const path = require('path');

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.resolve.extensions.push('.ts', '.tsx');

  defaultConfig.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: "ts-loader",
    options: {
      // absolute path from the current process directory if you want to use your own
      configFile: path.join(process.cwd(), './tsconfig.declaration.json')
    }
  });

  defaultConfig.module.rules.push({
    test: /\.(woff|woff2|eot|ttf|svg|gif|png)$/,
    loader: "file-loader"
  });

  defaultConfig.module.rules.push({
    test: /\.(scss|sass)$/,
    loaders: ["style-loader", "css-loader", "resolve-url-loader", "sass-loader?sourceMap"],
  });

  return defaultConfig;
};

[fgvicente]

@frankstallone thank for help but not work.

[frankstallone]

I don't think Storybook would even properly start if your SCSS file wasn't properly handled in webpack therefore as far as this issue is concerned it sounds like you are loading it properly now.

Your pointing to line 2 in a completely different file and I have no context as to what you are even showing in your last image. Start a new issue and breakdown your question a little further.

@omariosouto should consider closing this ticket if is indeed a solved problem.

[fgvicente]

@frankstallone I explain myself a little better. NO error storybook now, but I do not load the css. the second image shows the button without the styles and in the console it also does not show that it loads a class