Компиляция SCSS в сборнике рассказов с Гэтсби - PullRequest
Новая
       13

Компиляция SCSS в сборнике рассказов с Гэтсби

0 голосов
/ 08 ноября 2019

У меня есть проект GatsbyJS, и я хочу добавить Storybook в этот проект, чтобы продемонстрировать каждый отдельный компонент. Я использую SCSS в своем проекте, который компилируется с gatsby-plugin-sass, который прекрасно работает. Однако я не могу использовать свои компоненты в Storybook, поскольку он не может скомпилировать файлы SCSS.

Я следовал инструкциям как Storybook, так и GatsbyJS. Вот как выглядит мой storybook / webpack.config.js: 

module.exports = ({ config }) => {

  // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
  config.module.rules[0].exclude =
    [
      /node_modules\/(?!(gatsby)\/)/,
    ];

  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
  config.module.rules[0].use[0].loader = require.resolve('babel-loader');

  // use @babel/preset-react for JSX and env (instead of staged presets)
  config.module.rules[0].use[0].options.presets = [
    require.resolve('@babel/preset-react'),
    require.resolve('@babel/preset-env'),
  ];

  config.module.rules[0].use[0].options.plugins = [
    // use @babel/plugin-proposal-class-properties for class arrow functions
    require.resolve('@babel/plugin-proposal-class-properties'),

    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
    require.resolve('babel-plugin-remove-graphql-queries'),
  ];

  // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
  config.resolve.mainFields = ['browser', 'module', 'main'];
  return config;
};

, а мой файл storybook / config.js выглядит так: 

import { configure } from '@storybook/react';
import { action } from '@storybook/addon-actions';

// automatically import all files ending in *.stories.js
configure(require.context('../src', true, /\.stories\.js$/), module);

// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
  enqueue: () => {
  },
  hovering: () => {
  },
};

// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = '';

// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
window.___navigate = pathname => {
  action('NavigateTo:')(pathname);
};

Я предполагаю, что мне нужно добавитьsass-загрузчик в конфигурацию webpack, однако добавление другого пользовательского загрузчика выглядит неестественно, поскольку GatsbyJS уже обрабатывает мои файлы SCSS.

Я возился с добавлением sass-loader, css-loader и style-loader в мой webpack.config.js, но не смог заставить его работать.

Также поиск в этой конкретной ситуации не дает мне много хитов. Я предполагаю, что я не первый человек, который пытается это сделать.

...