CODEWITHSUNDEEP
webpacksassstorybook
Tyler Morales
Tyler Morales

Reputation: 1828

How to use SCSS and Tailwind CSS with Storybook in Next.js

I am trying to load a global scss file into storybook, but as soon as I changed the import from .css to .scss, I got errors that ranged from @ not being recognized in the @import tailwind to ERROR in ./styles/globals.scss. This is the error I am stuck on currently.

Here is my main.js file inside .storybook

//.storybook/main.js
module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../components/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
    })

    return config
  },
  framework: '@storybook/react',
}


//.storybook/preview.js
import '../styles/globals.scss'

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

And the error I get when I run storybook:

ERROR in ./styles/globals.scss
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

I was able to run storybook find with a normal global.css file, but when I added scss, I got errors.

Here is a list of my dependencies if that helps:

"dependencies": {
    "next": "12.0.7",
    "path": "^0.12.7",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sass": "^1.45.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@storybook/addon-actions": "^6.4.9",
    "@storybook/addon-essentials": "^6.4.9",
    "@storybook/addon-links": "^6.4.9",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.4.9",
    "autoprefixer": "^10.4.0",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "cypress": "^9.1.1",
    "eslint": "7",
    "eslint-config-next": "12.0.7",
    "eslint-plugin-storybook": "^0.5.3",
    "postcss": "^8.4.4",
    "postcss-loader": "^6.2.1",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.0"
  }

Upvotes: 5

Views: 3174

Answers (2)

Salehi
Salehi

Reputation: 221

I break it to 3 steps for storybook and it worked for me(without watching changes)

"storybook:sass": "sass ./src/styles/index.scss ./dist/compiled.css",
"storybook:tailwind": "tailwindcss -i ./dist/compiled.css -o ./dist/output.css",
"storybook:start": "start-storybook -p 6006",
"storybook": "npm run storybook:sass && npm run storybook:tailwind && npm run storybook:start"

and

// .storybook/preview.js
import "../dist/output.css";

Also you can add /dist to .gitignore

Edit: or let webpack do it:

// .storybook/main.js
const path = require("path");

module.exports = {
  stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-scss",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(s?)css$/,
      use: ["postcss-loader", "sass-loader"],
      include: path.resolve(__dirname, "../"),
    });
    return config;
  },
};

Upvotes: 1

Gabriel Araujo
Gabriel Araujo

Reputation: 51

If you are using Webpack 4 downgrading some dependencies might help.

For Webpack-4 try running:

yarn add -D @storybook/preset-scss \
  sass \
  css-loader@5 \
  sass-loader@10 \
  style-loader@2

Then add the following to .storybook/main.js:

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

Reference:

Upvotes: 2

Related Questions