javascript - 如何使用 Create React App 设置 Storybook 以使用全局 sass mixins

Question

我有一个使用 Create React App 制作的应用程序，并想将 Storybook 与它一起使用。

我的应用程序使用 scss 模块，因此我使用CRACO来确保我的全局 scss 变量和 mixin 在我的 scss 模块中可用。我的 CRACO 配置如下所示：

const sassResourcesLoader = require('craco-sass-resources-loader');
const sassInject = require.resolve('./src/css/global.scss');

module.exports = {
  plugins: [
    {
      plugin: sassResourcesLoader,
      options: {
        resources: sassInject,
      },
    },
  ],
};

当然，Storybook 不使用此配置。

默认的故事书配置文件如下所示：

// .storybook/main.js
module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app'
  ],
};

// .storybook/preview.js
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

我找到了一些文档，这些文档提出了一些类似的建议，应该允许将我与 CRACO 一起使用的配置添加到故事书中：

// .storybook/main.js
const sassResourcesLoader = require('craco-sass-resources-loader');
const sassInject = require.resolve('../src/css/global.scss');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app'],
  webpackFinal: (config) => {
    config.plugins.push({
      plugin: sassResourcesLoader,
      options: {
        resources: sassInject,
      },
    });
    return config;
  },
};

不幸的是，这只会导致错误：

info @storybook/react v6.2.9
info 
info => Loading presets
info => Serving static files from ./public at /
info => Loading 1 config file in "/Users/Me/myApp/.storybook"
info => Loading 7 other files in "/Users/Me/myApp/.storybook"
info => Adding stories defined in "/Users/Me/myApp/.storybook/main.js"
info => Using prebuilt manager
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack4 setup
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.plugins[14] misses the property 'apply'.
ERR!    function
ERR!    -> The run point of the plugin, required method.
ERR!     at Object.webpack [as get] (/Users/Me/myApp/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/Users/Me/myApp/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/dev-server.js:103:28)
ERR!     at async buildDevStandalone (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at async buildDev (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
ERR!  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.plugins[14] misses the property 'apply'.
ERR!    function
ERR!    -> The run point of the plugin, required method.
ERR!     at Object.webpack [as get] (/Users/Me/myApp/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/Users/Me/myApp/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/dev-server.js:103:28)
ERR!     at async buildDevStandalone (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at async buildDev (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)

如何成功让 Storybook 导入我的 scss 变量和 mixin？

谢谢

Answer 1

您可以使用storybook-preset-craco包，它为 Storybook 提供了单行 craco 配置。