Storybook webpack 不会加载 scss 文件

Question

我在运行 storybook 时没有收到错误，但我的样式都没有加载。请帮忙。我正在使用 webpack 2.2.1。

我查看了所有 S.O.和无数的 G.H.问题答案无济于事。这是我的 .storybook 目录中的 webpack.config.js

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'
          }
        ]
    }
}

这是我的故事目录中的 index.html：

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}/>
    )
  )

这是我的 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";

Answer 1

这应该会有所帮助

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;
};