reactjstypescriptwebkitstorybooksass-loader

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

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