Use global scss with storybook

Question

I am new in Storybook.

I have a .scss file used in global. I want to import this file from storybook.

So I made .storybook/config.js file and import scss inside. but it shows me error.

Error

ERROR in ./styles/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js!./node_modules/sas
s-resources-loader/lib/loader.js!./styles/style.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
        on line 1 of C:\Users\Walter\WebstormProjects\closet-next\styles\style.scss
>> var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIn
   ^

 @ ./styles/style.scss 2:26-346 43:4-64:5 46:18-338
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.
storybook/config.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

What is problem? Here is main.js

main.js

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.(js|mdx|tsx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-knobs',
    '@storybook/preset-scss',
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, './tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, '/')],
        transpileManager: true,
      },
    },
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true, 
        babelOptions: {},

      },
    },
  ],
  parameters: {
    docs: {
      inlineStories: false, 
    },
  },
  webpackFinal: config => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader', 'sass-resources-loader'],
    });
    return config;
  },
};

Hazlitt

Answer 1

Just add this line on the top of .storybook/preview.js then everything should be good

import '!style-loader!css-loader!sass-loader!../src/globalStyles/global.scss';

also remember to install dev dependencies

yarn add -D style-loader css-loader sass-loader

Fist

add sass also – Salado

i getting TypeError: this.getOptions is not a function please help to solve this – Gristly

@KrishnaJangid check this answer: https://mcmap.net/q/92783/-typeerror-this-getoptions-is-not-a-function ... also watch out for the version of css-loader and style.loader. You need to downgrade those versions due to "outdated" webpack version. – Mincing

this.getOptions - Don't use sass-loader higher than 10, it requires webpack 5 – Marsland

Answer 2

For "@storybook/vue3": "^6.5.9", just import your styles in the .storybook/preview.js.

import "../src/styles/app/[email protected]"

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

Here's my devDependencies in package.json for more info:

"devDependencies": {
  "@storybook/addon-actions": "^6.5.9",
  "@storybook/addon-essentials": "^6.5.9",
  "@storybook/addon-interactions": "^6.5.9",
  "@storybook/addon-links": "^6.5.9",
  "@storybook/builder-vite": "^0.1.36",
  "@storybook/testing-library": "0.0.13",
  "@storybook/vue3": "^6.5.9",
  "storybook-addon-sass-postcss": "^0.1.3",
}

Colpotomy

For some reason it still cannot use anything from the scss imported in preview.js. It seems to regard the component as the root stylesheet and then just says it cannot find a variable defined in the index.scss. My devDependencies are the same as yours. any idea? – Trunnion

How could I dynamically import a different stylesheet based on a globals value? – Patron

@Taylor Have you tried using import(cssPath)? – Colpotomy

Answer 3

Which version of storybook are you using? config.js has been rename to preview.js from v5.3 onwards

To import global styles, you should create .storybook/preview-head.html and import your global.scss in there. This will load it for all the stories.

Shipmate

global.scss cannot be parsed by the browser and needs to be processed first. Are you implying that this step is implicitly done by Storybook. If so is this documented somewhere? From my perspective I attempted the import but in vain. – Purity

I can see how my answer can be confusing. Sass files can of course not be imported in HTML files - they need to be preprocessed and the generated css file can only be included. I was more focussed on answering where common styles for all stories can be included. – Shipmate

Answer 4

From Storybook documention: How to add scss support

// .storybook/main.js

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

Kokoschka

Answer 5

The current Storybook docs recommend the following solution:

Storybook preset addons are grouped collections of specific babel,webpack and addons configurations for distinct use cases. Each one with it's own set of instructions. Preset addons have a three-step installation process: install, register and optionally configuration.

For example, to use SCSS styling, run the following command to install the addon and the required dependencies:

# Webpack 5

# With npm
npm install @storybook/preset-scss css-loader sass sass-loader style-loader --save-dev

# With yarn
yarn add --dev @storybook/preset-scss css-loader sass sass-loader style-loader

Next, update .storybook/main.js to the following:

// .storybook/main.js

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

Now when you run Storybook it will configure itself to use SCSS styling. No further configuration needed.

You can then import a SCSS file from preview.js:

import "./global.scss";

Gaultheria