bilingo-ui/.storybook/main.js

const path = require("path");
// const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  webpackFinal: async (config) => {
    config.resolve.alias = {
      "@": path.resolve(__dirname, "..", "src"),
      "@components": path.resolve(__dirname, "..", "src/components"),
      "@services": path.resolve(__dirname, "..", "src/services"),
    };

    // config.resolve.plugins = [new TsconfigPathsPlugin()];

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve("babel-loader"),
          options: {
            presets: [require.resolve("babel-preset-react-app")],
          },
        },
      ],
    });

    config.module.rules.push({
      test: /\.less$/,
      include: /node_modules|antd\.less/,
      use: [
        "style-loader",
        "css-loader",
        {
          loader: "less-loader",
          options: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        }
      ]
    });

    config.module.rules.push({
      test: /\.less$/,
      loaders: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            modules: {
              localIdentName: '[name]__[local]___[hash:base64:5]',
            },
            importLoaders: 1,
          },
        },
        {
          loader: "less-loader",
          options: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      ],
      exclude: /node_modules|antd\.less/,
    });

    return config;
  },
};