Импортируйте глобальный PostCSS с помощью Storybook 5

В Storybook v4 я загрузил файлы PostCSS моего приложения React в два этапа:

  1. Сначала я обновил конфигурацию Webpack Storybook в ./.storybook/webpack.config.js.
    // https://github.com/storybookjs/storybook/issues/6319#issuecomment-477852640
    config.module.rules = config.module.rules.filter(
      f => !f.test || f.test.toString() !== '/\\.css$/'
    );

    config.module.rules.push({
      test: /\.css$/,
      loaders: ['style-loader', 'css-loader', 'postcss-loader'],
      include: path.resolve(__dirname, '../'),
    });
  1. Затем я добавил _3 _. /. Storybook / config.js`

К сожалению, после обновления до Storybook v5 (теперь с использованием одного файла main.js) я не могу просто импортировать свои стили в начало этого файла.

Учитывая приложение React, сгенерированное из CRA, как мне загрузить стили PostCSS, чтобы они вели себя так же, как запущенное приложение (которое просто import "./styles.css" в App.jsx)?


reactjs postcss storybook
person garrettmaring    schedule 08.02.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Эта статья довольно четко ответила на вопросы. config.js все еще существует в Storybook v5 и используется для глобального импорта и настройки. Мне нужно было только переместить конфигурацию веб-пакета с config.js на main.js и сохранить импорт в прежнем виде.

person garrettmaring    schedule 08.02.2020