在 npm 包中发布 Storybook 组件时如何打包 .scss 文件？

Question

我刚刚在一个 npm 包中发布了我的 Storybook 组件（我们称之为 my-storybook）并遵循本教程：https://storybook.js.org/tutorials/design-systems-for-developers/react/en/distribute/

但是当我尝试在项目中使用它们时，我的包中导出的每个组件都会出现以下错误：

Compiled with problems:

ERROR in ./node_modules/my-storybook/dist/stories/Button/Button.js 14:0-24

Module not found: Error: Can't resolve './button.scss' in '/Users/storybook-test/my-app/node_modules/my-storybook/dist/stories/Button'

我的 Storybook 组件文件夹结构是这样的：

/src
 /stories
   /Button
     Button.jsx
     button.scss
     Button.stories.jsx

根据上面链接的教程，发布的构建脚本是这样的：

"build": "cross-env BABEL_ENV=production babel src -d dist"

在我的 index.js 中，我像这样导出组件：

export * from "./stories/Button/Button";

当我进入 dist 文件夹时，我看到 .scss 文件未包含在导出中。我不确定它是否应该包括它们，但我不知道如何解决这个错误。 dist 文件夹树如下所示：

/dist
 /stories
   /Button
     Button.js
     Button.stories.js

dist 文件夹中的两个文件都有 require("./button.scss"); 行，这就是给我错误的行。

当我尝试在新的 React 应用程序中导入组件时，如何解决上述错误？任何想法，将不胜感激。非常感谢你。

编辑：这是我的.storybook/main.js 文件

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  staticDirs: ["../public"],
};

Answer 1

我遇到了完全相同的问题，我设法使用 rollup.js 而不是 webpack 来解决它。我花了一点时间来解决这个问题，但它解决了很多问题。

我喜欢它，因为它将代码（包括 scss）转换为单个文件 cjs，这使得导入时更容易。

这是我使用的documentation，video 也很有帮助：

这是我的包.json 文件：

{
  "name": "seb-storybook-test",
  "version": "1.0.13",
  "description": "just playing around",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "build-lib": "rollup -c --bundleConfigAsCjs"
  },
  "files": [
    "dist"
  ],
  "author": "Sebastian Meckovski",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@rollup/plugin-node-resolve": "^15.0.0",
    "@storybook/addon-actions": "^6.5.12",
    "@storybook/addon-essentials": "^6.5.12",
    "@storybook/addon-interactions": "^6.5.12",
    "@storybook/addon-links": "^6.5.12",
    "@storybook/builder-webpack4": "^6.5.12",
    "@storybook/manager-webpack4": "^6.5.12",
    "@storybook/react": "^6.5.12",
    "@storybook/testing-library": "^0.0.13",
    "babel-loader": "^8.2.5",
    "postcss": "^8.4.17",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^3.1.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-scss": "^3.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "sass": "^1.55.0",
    "sass-loader": "^13.1.0",
    "storybook-addon-sass-postcss": "^0.1.3"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

这是rollup.config.js：

import babel from "rollup-plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";
import scss from "rollup-plugin-scss";
import { terser } from "rollup-plugin-terser";

export default [
  {
    input: "./src/index",
    output: [
      {
        file: "dist/index.js",
        format: "cjs",
      },
    ],
    plugins: [
      scss({
        insert: true,
      }),
      babel({
        exclude: "node_modules/**",
        presets: ["@babel/preset-react"],
      }),
      external(),
      resolve(),
      terser(),
    ],
  },
];

希望这可以帮助。

编辑1：

附上我的GitHub repo，以便您检查详细设置