'Storybook 6, use module paths?

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.

Solution 1:^[1]

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

Solution 2:^[2]

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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Alex Foxleigh
Solution 2	Alex Foxleigh

'Storybook 6, use module paths?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]