Vite + Storybook + SCSS: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

Question

I struggle for a good 4-5 hours to make SCSS work with Vite + Storybook setup and I need your help. I'm getting the following error message when I try to start Storybook:

ERROR in ./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

Storybook main.js

const path = require('path');
module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  }
}

I'm importing the SCSS in the Storybook preview.js The SCSS works fine in Vite but not loading in Storybook.

...
import '../src/styles/main.scss'
...

And finally the package.json

{
  "name": "X",
  "version": "0.0.0",
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "css-loader": "^3.6.0",
    "history": "^4.10.1",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-redux": "^7.2.4",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "sass-loader": "^12.1.0",
    "style-loader": "^1.3.0",
    "styled-components": "^5.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@storybook/addon-actions": "^6.3.7",
    "@storybook/addon-docs": "^6.3.7",
    "@storybook/addon-essentials": "^6.3.7",
    "@storybook/addon-links": "^6.3.7",
    "@storybook/react": "^6.3.7",
    "@vitejs/plugin-react-refresh": "^1.3.1",
    "babel-loader": "^8.2.2",
    "sass": "^1.35.2",
    "vite": "^2.4.3"
  }
}

Would appreciate your help with this. Thanks!

Answer 1

install @storybook/scss-loader https://www.npmjs.com/package/@storybook/preset-scss

yarn add -D @storybook/preset-scss

downgrade dependencies. if you have these installed remove them

yarn remove sass-loader style-loader css-loader

install these versions

yarn add -D sass-loader@10.1.1 style-loader@2.0.0 css-loader@5.2.6

If your files look like this, storybook should compile successfully.

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
  ],
};

package.json
...
"devDependencies": {
    "@storybook/addon-actions": "^6.3.6",
    "@storybook/addon-essentials": "^6.3.6",
    "@storybook/addon-links": "^6.3.6",
    "@storybook/html": "^6.3.6",
    "@storybook/preset-scss": "^1.0.3",
    "css-loader": "5.2.6",
    "sass-loader": "10",
    "style-loader": "2.0.0",
  },
...

https://github.com/storybookjs/presets/issues/195#issuecomment-887733786