How to add aliases in storybook

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