When dealing with scss modules in a TypeScript environment, my modules are saved within a property named default.
Button-styles.scss
.button {
background-color: black;
}
index.tsx
import * as React from 'react';
import * as styles from './Button-styles.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 does this happen? It's causing issues for generating types with typed-scss-modules.
EDIT:
Here is the Storybook configuration:
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;
},
};