4

Storybook を実行してもエラーは発生しませんが、スタイルが読み込まれません。助けてください。私は webpack 2.2.1 を使用しています。

SO と無数の GH の問題の回答をすべて調べましたが、役に立ちませんでした。これが私の .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";

4

1 に答える 1

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;
};
于 2018-01-16T02:36:08.497 に答える