CODEWITHSUNDEEP
javascriptreactjswebpacksassstorybook
Charlie Person
Charlie Person

Reputation: 65

Storybook webpack will not load scss files

I'm not getting an error when I run storybook but none of my styles are loading. Please help. I'm using webpack 2.2.1.

I've looked at all of the S.O. and countless G.H. issues answers to no avail. Here's my webpack.config.js within my .storybook directory

const path = require('path');

module.exports = {
    module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader'
          },
          {
            test: /\.scss$/,
            use: [
              'style-loader',
              'css-loader',
              'sass-loader'
            ],
            include: path.resolve(__dirname, '../client/styles')
          },
          {
            test: /\.(ttf|eot|woff|woff2|svg)$/,
            loader: 'file-loader'
          }
        ]
    }
}

Here is my index.html within my stories directory:

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import MenuOption from '../client/app/landingPage/components/menuOption'

import { Button, Welcome } from '@storybook/react/demo';
import { withInfo } from '@storybook/addon-info';
import '../client/styles/index.scss';


storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

storiesOf('Component', module)
  .add('simple info',
    withInfo({
      text: 'String or React Element with docs about my component',
    })(() =>
    <MenuOption
      icon={'icon-knife'}
      text={"Orders to Cut Today"}
      isDisabled={false}
      isFocused={true}/>
    )
  )

And here is my index.scss:

@import "basic";
@import "icons";
@import "_colors";
@import "_orders";
@import "_header";
@import "_navigation";
@import "_footer";
@import "_key-specification";
@import "_table-summary";
@import "_landing-page";
@import "_order-to-pack";
@import "_error";
@import "_instruction";
@import "_packed-boxes-table";
@import "_source-meat";
@import "_portion-sizes-table";
@import "_byproduct";
@import "components/index";

Upvotes: 4

Views: 6970

Answers (1)

Daniel Khoroshko
Daniel Khoroshko

Reputation: 2721

Probably this should help

const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);

  config.module.rules.push({
     test: /\.scss$/,
     use: [
       'style-loader',
       'css-loader',
       'sass-loader'
     ],
     include: path.resolve(__dirname, '../client/styles')
  });

  config.stats = 'verbose';

  config.resolve.extensions.push('.scss');

  return config;
};

Upvotes: 1

Related Questions