bilingo-ui/.storybook/webpack.config.js

const fs = require('fs');
const path = require('path');

module.exports = ({ config }) => {
  config.resolve.modules =  ['node_modules'];
  config.module.rules.push({
    test: /\.stories\.tsx?$/,
    loaders: [require.resolve('@storybook/source-loader')],
    enforce: 'pre',
  });
  config.module.rules.push({
    test: /\.less$/,
    include: /node_modules|antd\.less/,
    use: [
      "style-loader",
      "css-loader",
      {
        loader: "less-loader",
        options: {
          javascriptEnabled: true
        }
      }
    ]
  });
  config.module.rules.push({
    test: /\.less$/,
    use: [
    'style-loader', 
    {
      loader: 'css-loader',// translates CSS into CommonJS
      options: {
        modules: {
          localIdentName: '[name]__[local]___[hash:base64:5]',
        },
      }
    },
    'postcss-loader',
    {
      loader: 'less-loader',
      options: {
        config: {
          path: path.join(path.resolve(__dirname, '..'), 'postcss.config.js')
        },
        javascriptEnabled: true,
      },
    }],
    exclude: /node_modules|antd\.less/,
  });
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      // Optional
      {
        loader: require.resolve("react-docgen-typescript-loader"),
        options: {
          // Provide the path to your tsconfig.json so that your stories can
          // display types from outside each individual story.
          tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
        },
      },
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        }
      },
    ]
  });
  config.resolve.extensions.push(".ts", ".tsx");
  config.resolve.alias = {
    ...config.resolve.alias,
    '@': `${path.resolve(fs.realpathSync(process.cwd()), './src')}`,
    '@components': `${path.resolve(fs.realpathSync(process.cwd()), './src')}/components`,
  }
  config.output.library = "[name]";
  return config;
};