I’ve run into this exact issue before—Storybook doesn’t automatically mirror your project’s full Webpack setup, so even if your app works fine, Storybook might miss key loader or path configurations needed for SCSS partials. Let’s walk through the most likely fixes:

1. Make sure Storybook has SCSS loaders configured #

Storybook’s default Webpack config doesn’t handle SCSS out of the box (or might not match your project’s setup). You need to explicitly add SCSS support in your .storybook/main.js using webpackFinal:

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  webpackFinal: (config) => {
    // Add rule for SCSS files
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader', // Injects styles into the DOM
        'css-loader',   // Resolves imports in CSS files
        'sass-loader'   // Compiles SCSS to CSS
      ],
      include: path.resolve(__dirname, '../src'), // Point to your project's source folder
    });

    return config;
  },
};

2. Merge your project’s existing Webpack config (if possible) #

If your project already has a working SCSS setup, instead of writing a new rule, merge your project’s Webpack config into Storybook’s to avoid inconsistencies:

const path = require('path');
const projectWebpackConfig = require('../webpack.config.js'); // Path to your project's Webpack config

module.exports = {
  // ... other Storybook settings
  webpackFinal: (config) => {
    // Merge project's module rules into Storybook's config
    config.module.rules = [...config.module.rules, ...projectWebpackConfig.module.rules];
    
    // If you have resolve aliases in your project, copy those too!
    config.resolve.alias = { ...config.resolve.alias, ...projectWebpackConfig.resolve.alias };

    return config;
  },
};

3. Check Sass includePaths for partial resolution #

If your project uses Sass includePaths to simplify imports (e.g., skipping long relative paths), you need to mirror that in Storybook’s sass-loader options:

// Inside webpackFinal's rule for SCSS
{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        includePaths: [
          path.resolve(__dirname, '../src/styles'), // Path to your main styles directory
          // Add any other paths your project uses
        ],
      },
    },
  ],
}

This ensures Sass can find your _table.scss partial when you use @import './_table.scss' (or even @import 'table', since Sass auto-detects partials with underscores).

4. Verify your import syntax and paths #

Double-check that your import in styles.scss is correct:

• Valid: @import './_table.scss';
• Also valid (Sass auto-resolves underscores/suffixes): @import './table';
• If the path is wrong (e.g., ../_table.scss instead of ./_table.scss), Storybook will fail to load it even if your project’s config has fallback resolve rules.

5. Clear Storybook’s cache #

Sometimes old cached configs cause issues. Restart Storybook with the no-cache flag:

npm run storybook -- --no-manager-cache

Or delete the .storybook/cache directory manually before restarting.

内容的提问来源于stack exchange，提问作者Christopher Francisco