Storybook webpack 不会加载 scss 文件

Question

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 SO and countless GH 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";

Answer 1

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