Skip to content

fix: add missing @/styles alias to Storybook webpack config - #3272

Open
Mir-Zairan wants to merge 1 commit into
quran:productionfrom
Mir-Zairan:fix/storybook-styles-alias
Open

fix: add missing @/styles alias to Storybook webpack config#3272
Mir-Zairan wants to merge 1 commit into
quran:productionfrom
Mir-Zairan:fix/storybook-styles-alias

Conversation

@Mir-Zairan

Copy link
Copy Markdown

Summary

The @/styles path alias was missing from the manually defined aliases in .storybook/main.js. This caused a SassError: Can't find stylesheet to import when Storybook tried to compile any component whose SCSS module uses @use '@/styles/constants' or @use '@/styles/breakpoints' (e.g. Button, Sorter), making those stories fail to render entirely.

The existing comment in the file already acknowledges that @/ aliases must be defined manually in Storybook — @/styles was simply omitted from the list.

Closes: N/A

Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📝 Documentation update
  • ♻️ Refactoring (no functional changes)

Scope Confirmation

  • This PR addresses one feature/fix only
  • If multiple changes were needed, they are split into separate PRs

Rollback Safety

  • Can be safely reverted without data issues or migrations

Test Plan

  • Unit tests added/updated
  • Integration tests added/updated
  • Manual testing performed

Testing steps:

  1. Run yarn storybook
  2. Navigate to any story that uses Button or Sorter components
  3. Confirm no SassError: Can't find stylesheet to import error appears
  4. Confirm the components render correctly

Edge Cases Verified

  • ⏳ Loading state handled
  • ❌ Error state handled
  • 📭 Empty state handled

Pre-Review Checklist

Code Quality

  • I have performed a self-review of my code (file by file)
  • My code follows the project style guidelines
  • No unused code, imports, or dead code included

Testing & Validation

  • Linting passes (yarn lint)

Accessibility (if UI changes)

N/A — configuration change only

Screenshots/Videos

N/A — no visual changes, this is a Storybook configuration fix

AI Assistance Disclosure

  • AI tools were NOT used for this PR
  • AI tools were used, and I have thoroughly reviewed and validated all generated code

The @/styles path alias was not included in the manually defined aliases
in .storybook/main.js. This caused a SassError when Storybook tried to
compile components that use `@use '@/styles/constants'` or
`@use '@/styles/breakpoints'` in their SCSS modules (e.g. Button, Sorter).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant