Как использовать sass-переменные приложения в декораторах сборника рассказов (React) - PullRequest
Новая
       40

Как использовать sass-переменные приложения в декораторах сборника рассказов (React)

0 голосов
/ 17 сентября 2018

Я создал сайт с помощью Gatsby.js (генератор статических сайтов с React) и пытаюсь добавить в него сборник рассказов.

Я добавил пользовательскую конфигурацию веб-пакета в сборник рассказов (следуя инструкции на https://storybook.js.org/configurations/custom-webpack-config/), чтобы загрузить sass и sass-ресурсы, но не могу заставить его работать.

Ниже приведены конфигурации. Я установил все «style-loader», «css-loader», «sass-loader», «sass-resources-loader», а также «node-sass» для «storybook / реагировать» в дополнение к тем, которые были изначально добавлены в "gatsby" и "gatsby-plugin-sass" в качестве зависимостей.

Будет замечательно, если кто-нибудь любезно посоветует. Заранее большое спасибо за помощь.

структура 

root - .storybook - addon.js
                  - config.js
                  - webpack.config.js
     - src        - components        - Component_1     - Component_1.js
                                                        - Component_1.scss
                                                        - Component_1.stories.js
                                      - ...
                  - styles            - _variables.scss
                                      - mixins          - _mixin_1.scs
                                                        - ...
                  - ...
    - ...

webpack.config.js (root / .storybook / webpack.config.js) 

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: [
          "style-loader",
          "css-loader",
          "sass-loader",
          {
            loader: "sass-resources-loader",
            options: {
              resources: [
                "src/styles/_variables.scss",
                "src/styles/mixins/**/*.scss"
              ]
            },
          },
        ],
        include: path.resolve(__dirname, "../")
      }
    ]
  }
};

component_1.stories.js 

import React from "react";
import { storiesOf } from "@storybook/react";
import Component_1 from "./Component_1";

storiesOf("Component_1", module)
  .addDecorator(story => (
    <div style={{backgroundColor: $color-primary}}>
      {story()}
    </div>
))
  .add("default", () => (
    <Component_1>
      This is Component 1!
    </Component_1>
));

сообщение об ошибке (отображается в приложении сборника рассказов) 

$color is not defined

ReferenceError: $grey is not defined
  at http://localhost:6006/static/preview.bundle.js:80090:33
  at http://localhost:6006/static/preview.bundle.js:57555:14
  at http://localhost:6006/static/preview.bundle.js:57556:16
  at WrapStory.render(http://localhost:6006/static/preview.bundle.js:61197:14)
  at http://localhost:6006/static/preview.bundle.js:44767:21
  at measureLifeCyclePerf (http://localhost:6006/static/preview.bundle.js:44047:12)
  at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:6006/static/preview.bundle.js:44766:25)
  at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:6006/static/preview.bundle.js:44793:32)
  at ReactCompositeComponentWrapper.performInitialMount (http://localhost:6006/static/preview.bundle.js:44333:30)
  at ReactCompositeComponentWrapper.mountComponent (http://localhost:6006/static/preview.bundle.js:44229:21)

В этом случае переменная sass "$ color-primary" определяется в "src / styles / _variables.scss". Я хочу использовать его для стилизации Component_1, показанного в приложении сборника рассказов.

Я попытался импортировать "_variables.scss" прямо в "Component_1.stories.js" и снова потерпел неудачу (пропущен "sass-resources-loader", только что использовал "sass-loader").

Спасибо за советы.

[править]

В дополнение к вышесказанному, мой файл конфигурации сборника рассказов выглядит следующим образом.

config.js (root / .storybook / config.js) 

import { configure, addDecorator } from "@storybook/react";

// automatically import all files ending in *.stories.js
const req = require.context('../src/components', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Ответы [ 2 ]

0 голосов
/ 29 марта 2019

Попробуйте добавить путь к своим переменным в конфигурационном файле сборника рассказов 

import "../src/styles/_variables.scss";
0 голосов
/ 17 сентября 2018

Вы настраивали свои истории 

import { configure } from '@storybook/react';

function loadStories() {
   require('../stories/index.js');
  // You can require as many stories as you need.
}

configure(loadStories, module);

Пожалуйста, проверьте следующую ссылку для получения дополнительной информации https://storybook.js.org/basics/guide-react/?_sm_au_=iVV5QWSZDFrMFq3P

...