Storybook 6，使用模块路径？

Question

是否可以将故事书 6 配置为使用我的 tsconfig.json 文件中的模块路径来与 sass-loader 一起工作（或者如果不可能，则只是复制相同的模式）。

理想情况下，我希望能够使用此选项添加 sass 加载程序：

additionalData: `
  @use '@themes' as vars;
  @use '@themes/breakpoints' as bp;
`,

而不是

additionalData: `
  @use '../themes' as vars;
  @use '../themes/breakpoints' as bp;
`,

我的 tsconfig.json 文件中包含此部分，它在 .ts 文件中运行良好，但显然在 sass 文件中不起作用：

"paths": {
      "@components/*": ["./components/*"]
    }

如果我能为主题复制它，那就太棒了。

Answer 1

事实证明这很简单：

在 main.js 中。将以下内容添加到您的 module.exports：

webpackFinal: async (config, { configType }) => {
 config.resolve.alias = {
    ...config.resolve.alias,
    "@themes": path.resolve(__dirname, "../themes/default")
  }
  return config;
}

Answer 2

实际上，过去的 Alex，现在有一个更好的解决方案，使用自动且不需要重复配置代码的 ts-config-paths-webpack-plugin：

// main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const pathsPlugin = new TsconfigPathsPlugin({
  configFile: path.resolve(__dirname, '../tsconfig.json')
})

webpackFinal: async (config) => {
    if (config.resolve.plugins) {
      config.resolve.plugins.push(pathsPlugin);
    } else {
      config.resolve.plugins = [pathsPlugin];
    }
    ...

Storybook 6，使用模块路径？

Storybook 6, use module paths?

webkit

typescript

reactjs

sass-loader

storybook