Storybook 6，使用模块路径？

Question

Is it possible to configure storybook 6 to use the module paths in my tsconfig.json file to work with sass-loader (or just to replicate the same pattern if that's not possible).

Ideally, I'd like to be able to add a sass loader with this option:

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

instead of

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

My tsconfig.json file has this section in it which works well inside.ts files but obviously doesn't work in sass files:

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

If I could replicate that for themes, that'd be amazing.

Answer 1

Turns out it was pretty easy:

in main.js . Add the following to your module.exports:

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

Answer 2

Actually, past Alex, there is a better solution now using the ts-config-paths-webpack-plugin that is automatic and doesn't require repeating config code:

// 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];
    }
    ...