reactjs - 我如何使用 tsx 和 sass 文件运行故事书

Question

我正在使用TSDX创建一个带有故事书的图书馆。

我的问题是当我运行故事书时：

npm run start-storybook -p 6006

显示下一个错误：

• ./src/sidenav/functions/index.tsx 中的错误找不到模块：错误：无法解析“../../../constants/global-constants”

• ./src/alarmbar/styles/alarmbar.scss 中的错误 1:0 模块解析失败：意外字符 '@' (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件文件。见https://webpack.js.org/concepts#loaders

似乎无法加载 tsx 和 sass 文件。

在 scss 文件中，我使用它在每个组件上使用暗模式和亮模式。

$color-text-black-base: #343434;
$color-text-white-base: #ffffff;

@function themed($key) {
    @return map-get($theme-map, $key);
}

$a-tags: "a, a:active, a:hover, a:visited";
$a-tags-hover: "a:active, a:hover";

/*
 * Implementation of themes
 */
@mixin themify($themes) {
    @each $theme, $map in $themes {
        .#{$theme} & {
            $theme-map: () !global;
            @each $key, $submap in $map {
                $value: map-get(map-get($themes, $theme), "#{$key}");
                $theme-map: map-merge(
                    $theme-map,
                    (
                        $key: $value,
                    )
                ) !global;
            }
            @content;
            $theme-map: null !global;
        }
    }
}

$themes: (
    light: (
        textColorBase: $color-text-black-base,
    ),
    dark: (
        textColorBase: $color-text-white-base,
    ),
);

因此，如果主题是深色或浅色，每个组件都会发生变化：

@import "./styles-utils.scss";

.breadcrumb-item {
    font-weight: 500;
    @include themify($themes) {
        color: themed("textColorBase");
    }
    margin-right: 5px;
    user-select: none;

    .normal {
        @include themify($themes) {
            color: themed("textColorBase");
        }
        text-decoration: none;
    }

    .normal:active,
    .normal:visited,
    .normal:hover {
        @include themify($themes) {
            color: themed("textColorBase");
        }
    }
}

.breadcrumb-item--active {
    font-weight: 700;
    @include themify($themes) {
        color: themed("textColorBase");
    }
}

知道如何解决吗？

解决方案：

1. 更新“@storybook/react”：“^6.1.11”

2. 添加“@storybook/preset-create-react-app”：“^3.1.5”

3. 在 .storybook 内的 main.js 上添加：

   const path = require("path");
   
   module.exports = {
   stories: ["../src/**/*.stories.@(ts|tsx|js|jsx|mdx)"],
   addons: [
       "@storybook/addon-links",
       {
           name: "@storybook/addon-docs",
           options: {
               configureJSX: true,
           },
       },
       "@storybook/addon-essentials",
       "@storybook/preset-create-react-app",
       "@storybook/addon-knobs",
       "@storybook/addon-actions",
   ],
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
       check: true, // type-check stories during Storybook build
   },
   module: {
       rules: [
           {
               test: /\.(scss|css)$/,
               use: ["style-loader", "css-loader", "sass-loader"],
               include: path.resolve(__dirname, "../"),
           },
           // { test: /\.css$/, loader: 'style-loader!css-loader', include: __dirname },
           {
               test: /\.(woff|woff2)$/,
               use: {
                   loader: "url-loader",
                   options: {
                       name: "fonts/[hash].[ext]",
                       limit: 5000,
                       mimetype: "application/font-woff",
                   },
               },
           },
           {
               test: /\.(ttf|eot|svg|png)$/,
               use: {
                   loader: "file-loader",
                   options: {
                       name: "fonts/[hash].[ext]",
                   },
               },
           },
       ],
   },
   

   };