CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-storybook--preset-scss

SCSS preset for Storybook that provides one-line webpack configuration for handling SCSS/SASS files

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Storybook SCSS Preset

Storybook SCSS Preset provides one-line SCSS configuration for Storybook. It automatically configures webpack loaders (style-loader, css-loader, and sass-loader) to handle .scss and .sass files, enabling developers to quickly add SCSS support to their Storybook setup without manually configuring webpack.

Package Information

  • Package Name: @storybook/preset-scss
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install -D @storybook/preset-scss css-loader sass-loader style-loader

Core Imports

// Import the preset module (for programmatic usage)
const { webpack } = require('@storybook/preset-scss');

TypeScript:

import type { PresetScss } from '@storybook/preset-scss';
// For programmatic usage:
// const presetScss: PresetScss = require('@storybook/preset-scss');

Note: Typically used as a Storybook addon/preset and imported automatically by Storybook.

Basic Usage

Add the preset to your .storybook/main.js:

module.exports = {
  addons: ['@storybook/preset-scss'],
};

With configuration options:

module.exports = {
  addons: [
    {
      name: '@storybook/preset-scss',
      options: {
        cssLoaderOptions: {
          modules: true,
          localIdentName: '[name]__[local]--[hash:base64:5]',
        },
        sassLoaderOptions: {
          implementation: require('sass'),
        }
      }
    }
  ]
};

Capabilities

Webpack Configuration

Configures webpack to handle SCSS/SASS files with the necessary loaders.

/**
 * Webpack configuration function that adds SCSS support to Storybook
 * @param webpackConfig - Existing webpack configuration object (optional, defaults to {})
 * @param options - Configuration options for the preset (optional, defaults to {})
 * @returns Modified webpack configuration with SCSS support
 */
function webpack(webpackConfig = {}, options = {}) {
  // Returns webpack config with SCSS rule added
  // Internally uses wrapLoader() to conditionally apply loaders
  // Test pattern: /\.s[ca]ss$/
  // Loader chain: style-loader -> css-loader -> sass-loader
}

Usage:

// Called automatically by Storybook when preset is registered
// No direct usage required - configuration happens through Storybook's addon system

// For programmatic usage:
const { webpack } = require('@storybook/preset-scss');
const modifiedConfig = webpack(existingWebpackConfig, {
  cssLoaderOptions: { modules: true },
  sassLoaderOptions: { implementation: require('sass') }
});

Loader Behavior:

The preset internally uses a wrapLoader function that conditionally applies loaders:

  • If a loader option is false, that loader is skipped entirely
  • If a loader option is an object, it's passed as options to that loader
  • If a loader option is undefined, the loader is applied with no options

File Pattern:

The preset adds a webpack rule that matches files with the pattern /\.s[ca]ss$/, which includes:

  • .scss files (Sass with SCSS syntax)
  • .sass files (Sass with indented syntax)

Types

// From webpack types
interface Configuration {
  module?: {
    rules?: any[];
  };
  [key: string]: any;
}

interface RuleSetCondition {
  exclude?: RegExp | string;
  include?: RegExp | string;
  [key: string]: any;
}

interface Options {
  /** Options for style-loader or false to disable */
  styleLoaderOptions?: object | false;
  /** Options for css-loader or false to disable */
  cssLoaderOptions?: object | false;
  /** Options for sass-loader or false to disable */
  sassLoaderOptions?: object | false;
  /** Additional webpack rule conditions */
  rule?: RuleSetCondition;
}

interface PresetScss {
  webpack: (config?: Configuration, options?: Options) => Configuration;
}

Configuration Options

Style Loader Options

Configure style-loader behavior or disable it entirely.

{
  styleLoaderOptions: {
    // Standard style-loader options
    // See: https://webpack.js.org/loaders/style-loader/
  }
  // Or disable:
  // styleLoaderOptions: false
}

CSS Loader Options

Configure css-loader for features like CSS modules.

{
  cssLoaderOptions: {
    modules: true,
    localIdentName: '[name]__[local]--[hash:base64:5]',
    // Other css-loader options
    // See: https://webpack.js.org/loaders/css-loader/
  }
  // Or disable:
  // cssLoaderOptions: false
}

SASS Loader Options

Configure sass-loader with custom implementation or other options.

{
  sassLoaderOptions: {
    implementation: require('sass'), // Use Dart Sass instead of Node Sass
    // Other sass-loader options
    // See: https://webpack.js.org/loaders/sass-loader/
  }
  // Or disable:
  // sassLoaderOptions: false
}

Rule Configuration

Add additional webpack rule conditions.

{
  rule: {
    exclude: /node_modules/,
    // Other webpack rule conditions
  }
}

Dependencies

This preset requires the following peer dependencies to be installed:

  • css-loader - Resolves CSS imports and processes CSS
  • sass-loader - Compiles SCSS/SASS to CSS
  • style-loader - Injects CSS into the DOM

The preset automatically resolves these loaders using require.resolve() and applies them in the correct order: style-loader → css-loader → sass-loader.

docs

index.md

tile.json