Storybook 自定义 webpack 加载空的 scss 对象答案

【问题标题】：Storybook custom webpack loading empty scss objectsStorybook 自定义 webpack 加载空的 scss 对象
【发布时间】：2018-07-11 02:46:00
【问题描述】：

我将自定义 webpack.config.js 文件添加到我的 .storybook 项目中，以便我可以导入 .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 与故事书一起使用？

【问题讨论】：

你最终查明真相了吗？我遇到了同样的问题。
你确定你指向正确的文件夹 sass-loader 吗？我想它可能以某种方式取决于您执行脚本的位置（哪个文件夹），因此可能会使用错误的 SCSS 文件路径

标签： css reactjs webpack storybook

【解决方案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
        }
      }
    },
  ]
}

就是这样。

【讨论】：