I use storybook 7.6.7 for my project. I want to be able to use *.module.scss and *.jpeg files in my stories. however, when I import a module.scss file, I get this error.
Cannot find module './*.module.scss' or its corresponding type declarations.ts(2307)
this is just a typescript error and the styles work fine in stories in production. here is my storybook config in main.ts.
import type { StorybookConfig } from "@storybook/react-webpack5";
const path = require("path");
function getAbsolutePath(value) {
return path.dirname(require.resolve(path.join(value, "package.json")));
}
const config: StorybookConfig = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-styling-webpack",
"@storybook/manager-api",
"@storybook/theming",
"storybook-dark-mode",
],
framework: getAbsolutePath("@storybook/react"),
core: {
builder: {
name: "@storybook/builder-webpack5",
options: {
fsCache: false,
lazyCompilation: true,
},
},
},
webpackFinal: async (config, { configType }) => {
config.module?.rules?.push({
test: /\.module\.s(a|c)ss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: {
localIdentName:
configType === "PRODUCTION"
? "[local]__[hash:base64:5]"
: "[name]__[local]__[hash:base64:5]",
exportLocalsConvention: "camelCase",
},
sourceMap: true,
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
},
},
],
include: path.resolve(__dirname, "../"),
});
return config;
},
};
export default config;
I have no idea how to fix it. I have already declared a index.d.ts file with module declarations included but no luck.
any help is appreciated.