How to add aliases in storybook

Add path aliases to Storybook so imports resolve the same way they do in the main webpack config.

To add Storybook path aliases edit .storybook/main.js

module.exports = {
// ... rest of config
  webpackFinal: async (config, other) => {
config.resolve.alias = {
  "@components": path.resolve(__dirname, "../", "src/components"),
  "@services": path.resolve(__dirname, "../", "src/services"),
  "@utilities": path.resolve(__dirname, "../", "src/utilities"),
};

return config;
  },
};

Or in webpack config

const projectConfig = require("../webpack.config");

module.exports = {
  //... rest of config
  webpackFinal: async (config) => {
return {
  ...config,
  resolve: { ...config.resolve, alias: { ...projectConfig.resolve.alias } },
};
  },
};

If styles are not importing you can add a style loader

   // .storybook/main.js
   module.exports = {
     addons: [
       '@storybook/addon-essentials',
       // Add other necessary addons here
     ],
     webpackFinal: async (config) => {
       config.module.rules.push({
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
         include: path.resolve(__dirname, '../'),
       });
       return config;
     },
   };