Fix storybook build and development

.storybook/main.ts

@@ -1,7 +1,9 @@
 import type { StorybookConfig } from '@storybook/nextjs'
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path')
 
 module.exports = {
-  stories: ['../!(node_modules)/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../public'],
   addons: [
     '@storybook/addon-links',
@@ -11,9 +13,20 @@ module.exports = {
   ],
   framework: {
     name: '@storybook/nextjs',
-    options: {}
+    options: {
+      // Ensure Storybook uses Next.js config (sassOptions, images, etc.)
+      nextConfigPath: path.resolve(__dirname, '../next.config.mjs')
+    }
   },
   async webpackFinal(config) {
+    // Resolve SCSS imports like `@use 'styles/utils'`
+    config.resolve = config.resolve || {}
+    config.resolve.alias = {
+      ...(config.resolve.alias || {}),
+      styles: path.resolve(__dirname, '../styles')
+    }
+
+    // Keep the custom .md loader used by content stories
     config.module?.rules?.push({
       test: /\.md$/,
       loader: require.resolve('./loaders/dist/postLoader'),

next.config.mjs

@@ -1,4 +1,5 @@
 import withBundleAnalyzer from '@next/bundle-analyzer'
+import path from 'node:path'
 
 /**
  * @type {import('next').NextConfig}
@@ -8,6 +9,10 @@ const config = {
     // https://nextjs.org/docs/basic-features/eslint#linting-custom-directories-and-files
     dirs: ['.']
   },
+  sassOptions: {
+    // Allow Sass imports like `@use 'utils'` from the styles directory
+    includePaths: [path.join(process.cwd(), 'styles')]
+  },
   typescript: {
     ignoreBuildErrors: true
   },
@@ -21,10 +26,9 @@ const config = {
   }
 }
 
-// eslint-disable-next-line import/no-anonymous-default-export
-export default () =>
-  [
-    withBundleAnalyzer({
-      enabled: process.env.ANALYZE === 'true'
-    })
-  ].reduce((acc, next) => next(acc), config)
+// Compose Next.js plugins and export the final config object
+export default [
+  withBundleAnalyzer({
+    enabled: process.env.ANALYZE === 'true'
+  })
+].reduce((acc, next) => next(acc), config)

package.json

@@ -9,7 +9,7 @@
     "analyze": "ANALYZE=true npm run build",
     "export": "next export",
     "start": "next start",
-    "sb": "npm run sb:prepare && storybook dev -p 6006",
+    "sb": "npm run sb:prepare && storybook dev -p 6006 --no-open",
     "sb:prepare": "node .storybook/loaders/build.js",
     "sb:build": "npm run sb:prepare && storybook build",
     "sb:serve": "npx serve storybook-static",