reactjs - 与 Gatsby 一起在 Storybook 中编译 SCSS

Question

我有一个现有的 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);
};

我认为我需要在 webpack 配置中添加一个 sass-loader，但是添加另一个自定义加载程序确实感觉有点不自然，因为 GatsbyJS 已经处理了我的 SCSS 文件。

我一直在摆弄将 sass-loader、css-loader 和 style-loader 添加到我的 webpack.config.js 中，但我无法让它工作。

此外，谷歌搜索这种具体情况并没有给我带来很多点击。我想我不是第一个尝试这样做的人。

Answer 1

安装此 npm 包:

npm install sass-loader node-sass webpack --save-dev

然后在 .storybook 文件夹中创建一个名为 webpack.config.js 的文件，并将这些配置粘贴到该文件上:

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
};