javascript - 故事书：无法为 scss 文件添加源地图

Question

我很难弄清楚如何为Storybook中的scss文件添加源映射。 我的 webpack 配置在一个专用文件中。

我用：

• 故事书 6.2.7
• 萨斯加载器

main.js

const custom = require('./webpack.config.js');

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-knobs",
    "@storybook/addon-a11y",
   ],
    "presets": [
     "@storybook/preset-scss"
   ],
   webpackFinal: (config) => {
    return { 
      ...config, 
      module: { 
        ...config.module, 
        rules: custom.module.rules,
      },
    };
  },
};

webpack.config.js

const path = require('path');

module.exports = async ({ config }) => {
  config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            sourceMap: true,
          },
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    }, {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: [
      {
          loader: require.resolve("babel-loader"),
          options: {
          presets: [
              require("@babel/preset-typescript").default,
              require("@babel/preset-react").default,
              require("@babel/preset-env").default
          ]}
      },
    ],
  });

  config.resolve.alias = {
  ...config.resolve.alias,
  '@': path.resolve(__dirname, '../src/'),
  };

  config.resolve.extensions.push(".ts", ".tsx");

  return config;
};

当我尝试运行故事书时，它不会启动，并且我收到来自以下的错误main.js：

TypeError：无法读取未定义的属性“规则”

我一直在关注 Storybook 中的文档：
https ://storybook.js.org/docs/react/configure/webpack

如果有人能指出我正确的方向，我会很高兴，因为我一直在尝试使用不同的语法并且无法找出问题所在。

标签： javascriptwebpackstorybooksource-maps