故事书自定义webpack加载空scss对象

Question

我在自己的.storybook项目中添加了自定义 webpack.config.js 文件，以便我可以导入.scss个文件。这就是我直接从故事书文档中添加的内容。

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, configType) => {
  // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  storybookBaseConfig.module.rules.push({
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    include: path.resolve(__dirname, '../src')
  });

  // Return the altered config
  return storybookBaseConfig;
};

这是我的故事：

import React from 'react';
import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
import { action } from '@storybook/addon-actions'; // eslint-disable-line import/no-extraneous-dependencies
import { linkTo } from '@storybook/addon-links'; // eslint-disable-line import/no-extraneous-dependencies
import Button from './'
import ButtonStyles from './index.scss'
import ButtonCompareTrayStyles from './compare-tray.scss'
import ButtonCompareRemminderStyles from './compare-reminder.scss'

console.log({ButtonStyles, ButtonCompareTrayStyles, ButtonCompareRemminderStyles})

storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => <Button onClick={action('clicked')}>   </Button>)
  .add('with default styles', () => <Button styles={ButtonStyles} onClick={action('clicked')}>Hello World</Button>)
  .add('with CompareTray styles', () => <Button styles={ButtonCompareTrayStyles} onClick={action('clicked')}>Hello World</Button>)
  .add('with CompareRemminder styles', () => <Button styles={ButtonCompareRemminderStyles} onClick={action('clicked')}>Hello World</Button>)

当我记录一些Button样式时，似乎每个对象都是空的。

为什么这些物品是空的？如何让scss使用故事书？

Answer 1

对于遇到相同问题的每个人，我都添加了软件包@storybook/preset-scss并按以下方式进行配置：

module.exports = {
  "stories": [
    "../src/**/*.stories.*",
    "../src/**/*.story.*"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-actions",
    "@storybook/addon-essentials",
    "@storybook/addon-knobs",
    {
      name: '@storybook/preset-scss',
      options: {
        cssLoaderOptions: {
          modules: true
        }
      }
    },
  ]
}

就是这样。