Why scss module with typescript has .default property

user_9730660 0
Viewed 70

When working with scss modules in typescript environment, my modules are stored in a property called default

Button.style.scss

.button {
  background-color: black;
}

index.tsx

import * as React from 'react';
import * as styles from './Button.module.scss';

console.log(styles);

export const Button = () => (
  <button className={styles.default.button}>Hello</button>
);

Console.log output

Module {__esModule: true, default: {button: "_2t432kRILm79F3WhLGdN6N"}, Symbol(Symbol.toStringTag): "Module"}

Why is that ? I cannot properly generate types with typed-scss-modules because of that.

EDIT:

Storybook config is

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader?modules=true', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};
storybook typescript reactjs sass css
1 Answers

You need to adjust your css-loader rule to have the "esModule": false option, like follows:

{
  loader: 'css-loader',
  options: {
    esModule: false,
  }
},
{
  loader: 'sass-loader',
}

This ensures import statements will return just the string, only

user_16609770
Related