I am trying to make a react component library and Im using storybook for visualising the components.
They load fine until when I use module.scss files to scope the styling to their projects. This is my main.ts
import type { StorybookConfig } from "@storybook/react-webpack5";
const path = require('path')
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-webpack5-compiler-swc",
"@storybook/addon-onboarding",
"@storybook/addon-links",
"@storybook/addon-essentials",
"@chromatic-com/storybook",
"@storybook/addon-interactions",
"@storybook/addon-styling-webpack",
"@storybook/preset-scss"
],
framework: {
name: "@storybook/react-webpack5",
options: {},
},
webpackFinal: async (config: any) => {
// Find and remove the existing css rule that conflicts with css module handling
config.module.rules = config.module.rules.filter(
(rule) => !rule.test || !rule.test.test('.css')
);
config.module.rules.push({
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
},
},
'sass-loader',
],
include: path.resolve(__dirname, '../src'),
});
return config;
},
};
export default config;And this is my package.json,
{
"name": "ultimatix-ui",
"version": "1.0.6",
"description": "",
"scripts": {
"rollup": "rollup -c",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"dev": "rollup -c --watch",
"test": "jest"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.24.5",
"@babel/preset-env": "^7.24.5",
"@babel/preset-react": "^7.24.1",
"@babel/preset-typescript": "^7.24.1",
"@chromatic-com/storybook": "^1.4.0",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-json": "^6.1.0",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "^11.1.6",
"@storybook/addon-essentials": "^8.1.2",
"@storybook/addon-interactions": "^8.1.2",
"@storybook/addon-links": "^8.1.2",
"@storybook/addon-onboarding": "^8.1.2",
"@storybook/addon-styling-webpack": "^1.0.0",
"@storybook/addon-webpack5-compiler-swc": "^1.0.2",
"@storybook/blocks": "^8.1.2",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^8.1.2",
"@storybook/react-webpack5": "^8.1.2",
"@storybook/test": "^8.1.2",
"@testing-library/react": "^15.0.7",
"@types/jest": "^29.5.12",
"@types/react": "^18.3.2",
"autoprefixer": "^10.4.19",
"babel-jest": "^29.7.0",
"css-loader": "^5.2.7",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"node-sass": "^9.0.0",
"postcss": "^8.4.38",
"react-dom": "^18.3.1",
"rollup": "^4.18.0",
"rollup-plugin-dts": "^6.1.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-sass": "^1.12.22",
"rollup-plugin-scss": "^4.0.0",
"sass": "^1.77.2",
"sass-loader": "^10.5.2",
"storybook": "^8.1.2",
"style-loader": "^2.0.0",
"tailwind": "^4.0.0",
"tslib": "^2.6.2",
"typescript": "^5.4.5"
},
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"files": [
"dist"
],
"types": "dist/index.d.ts",
"peerDependencies": {
"react": "^18.3.1"
}
}Can someone help me out in using scss modules in this fashion?
This is the error that storybook throws me:
