Unable to integrated sass to ReactJS storybook

Viewed 427

I tried out storybook for ReactJS. I followed this blog to create the same. Everthing is working as expected, I was able to publish the app to npm.

When I tried to add SASS support for my plugin, the app fails to run. CSS, and CSS modules are working fine. I have gone through their docs. I also tried out the suggestions reported in this issue in github. I tried downgrading the packages (css-loader, sass-loader, style-loader, & scss) that I am using. None of these helped.

Node version: 16 (I also tried with 12)

This is my package,json

{
  "name": "plugin",
  "version": "0.1.1",
  "description": "Starter template to get up and running quickly with React and Storybook",
  "main": "dist/index.js",
  "private": false,
  "files": [
    "dist",
    "README.md"
  ],
  "license": "MIT",
  "peerDependencies": {},
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "css-loader": "^6.2.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.3",
    "sass": "^1.41.1",
    "sass-loader": "^10.1.0",
    "style-loader": "^3.2.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "clean": "rimraf dist",
    "compile": "npm run clean && cross-env NODE_ENV=production babel src/stories --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,stories.jsx,__snapshots__",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.15.4",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@storybook/addon-actions": "^6.3.8",
    "@storybook/addon-essentials": "^6.3.8",
    "@storybook/addon-links": "^6.3.8",
    "@storybook/addon-storyshots": "^6.3.8",
    "@storybook/node-logger": "^6.3.8",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.3.8",
    "@storybook/testing-react": "^0.0.17",
    "cross-env": "^7.0.3",
    "react-test-renderer": "^17.0.2"
  }
}

I would very much appreciate some help. Thanks in advance. If some one could direct me to some sample code with proper SASS integration that would also be helpful

1 Answers

As you might know Storybook is based on Webpack of the fourth versions. This summer these loaders was updated and stop to support of the fourth version. List of the latest compatibles loaders and it versions for Webpack 4 below:

Just downgrade loaders to this versions and try again.

Also be sure that you configured webpack or installed @storybook/preset-scss to ".storybook/main.js"

I hope that I helped you.

Related