storybook: [Bug]: Cant use SASS/SCSS with React Typescript (7.0.0-rc.11)

Describe the bug

Im trying to import a .scss file into my React Typescript File, that is being used an Addon Panel like this:

// themepalette.tsx
import './themepalette.scss';

When i run npm run storybook the terminal fails and gives me

'No loader is configured for ".scss" files: lib/ui-components/themepalette/themepalette.scss'

Ive tried using @storybook/preset-scss but havent got it to work…

Using:

  • react
  • typescript
  • webpack5

package.json

  "dependencies": {
    "@mui/base": "^5.0.0-alpha.114",
    "@mui/system": "^5.11.5",
    "axios": "^1.2.0",
    "chart.js": "^4.2.1",
    "chartjs-plugin-annotation": "^2.1.2",
    "chartjs-plugin-zoom": "^2.0.0",
    "chroma-js": "^2.4.2",
    "guid-typescript": "^1.0.9",
    "immer": "^9.0.16",
    "js-quantities": "^1.7.6",
    "postcss-loader": "^7.1.0",
    "react-beautiful-dnd": "^13.1.0",
    "react-chartjs-2": "^5.2.0",
    "react-select": "^5.3.2",
    "storybook-addon-sass-postcss": "^0.1.3"
  },
  "peerDependencies": {
    "react": ">= 17.0.2 < 19",
    "react-dom": ">= 17.0.2 < 19"
  },
  "devDependencies": {
    "@aspnet/signalr": "^1.0.27",
    "@babel/core": "^7.12.13",
    "@babel/plugin-transform-runtime": "^7.12.15",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.0",
    "@babel/runtime": "^7.12.13",
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@storybook/addon-essentials": "^7.0.0-rc.11",
    "@storybook/addon-interactions": "^7.0.0-rc.11",
    "@storybook/addon-links": "^7.0.0-rc.11",
    "@storybook/addon-mdx-gfm": "^7.0.0-rc.11",
    "@storybook/blocks": "^7.0.0-rc.11",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^7.0.0-rc.11",
    "@storybook/react-webpack5": "^7.0.0-rc.11",
    "@storybook/testing-library": "^0.0.14-next.1",
    "@types/chai": "^4.2.15",
    "@types/chroma-js": "^2.4.0",
    "@types/js-quantities": "^1.6.3",
    "@types/mocha": "^5.2.6",
    "@types/node-sass": "^4.11.3",
    "@types/react-beautiful-dnd": "^13.0.0",
    "@types/react-dom": "^18.0.10",
    "@types/simple-mock": "^0.8.1",
    "@types/svgo": "^2.6.3",
    "@types/webpack-env": "^1.16.0",
    "@zip.js/zip.js": "^2.4.7",
    "babel-loader": "^8.2.2",
    "chai": "^4.3.0",
    "concurrently": "^3.5.1",
    "copy-webpack-plugin": "^8.0.0",
    "core-js": "^3.8.3",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.7",
    "fable-compiler": "^2.13.0",
    "fable-loader": "^2.1.9",
    "fable-powerpack": "^0.0.20",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "jsdom": "^13.2.0",
    "jsdom-global": "^3.0.2",
    "mini-css-extract-plugin": "^1.3.9",
    "mocha": "^6.2.0",
    "mocha-junit-reporter": "^1.23.1",
    "mocha-multi-reporters": "^1.5.1",
    "node-sass": "^8.0.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.60.0",
    "sass-loader": "^10.4.1",
    "simple-mock": "^0.8.0",
    "storybook": "^7.0.0-rc.11",
    "style-loader": "^2.0.0",
    "svgo": "^2.8.0",
    "terser": "^4.8.0",
    "terser-webpack-plugin": "^5.1.1",
    "ts-loader": "^8.0.17",
    "typescript": "^4.6.4",
    "webfont": "^11.2.26",
    "webpack": "^5.24.4",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-shell-plugin": "^0.5.0",
    "webpack-shell-plugin-next": "^2.1.1",
    "whatwg-fetch": "^3.5.0"
  }

.storybook/preview.ts

import type { Preview } from "@storybook/react";
import { ThemeType, ThemeMode } from "../lib/theming/models";
import { UggThemeProviderDecorator } from "./theme-decorator";
// TODO: Make SASS importable
import "../lib/ui-components/Api.scss";

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

export default preview;
export const decorators = [UggThemeProviderDecorator];

.storybook/main.ts

import type { StorybookConfig } from "@storybook/react-webpack5";
const path = require("path");
const config: StorybookConfig = {
  stories: ["../lib/**/*.mdx", "../lib/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [{
    name: "@storybook/addon-essentials",
    options: {
      backgrounds: false,
      grids: true
    }
  }, "@storybook/addon-links",
    "@storybook/addon-interactions",
    "./local-preset.ts",
    // TODO: Make SASS importable
    "@storybook/preset-scss",
    // TODO: Wait for SB7 Support
    //"@etchteam/storybook-addon-status",
    "@storybook/addon-mdx-gfm",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {}
  },
  features: {
    buildStoriesJson: true
  },
  docs: {
    autodocs: "tag"
  },
};
export default config;

To Reproduce

No response

System

**System:**
      OS: Windows 10 10.0.19045
      CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
  **Binaries:**
      Node: 16.20.0 - C:\Program Files\nodejs\node.EXE
      npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD
  **Browsers:**
      Edge: Spartan (44.19041.1266.0), Chromium (111.0.1661.54)   
  **npmPackages:**
      @storybook/addon-essentials: ^7.0.0-rc.11 => 7.0.0-rc.11    
      @storybook/addon-interactions: ^7.0.0-rc.11 => 7.0.0-rc.11  
      @storybook/addon-links: ^7.0.0-rc.11 => 7.0.0-rc.11
      @storybook/addon-mdx-gfm: ^7.0.0-rc.11 => 7.0.0-rc.11       
      @storybook/blocks: ^7.0.0-rc.11 => 7.0.0-rc.11
      @storybook/preset-scss: ^1.0.3 => 1.0.3
      @storybook/react: ^7.0.0-rc.11 => 7.0.0-rc.11
      @storybook/react-webpack5: ^7.0.0-rc.11 => 7.0.0-rc.11      
      @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 2
  • Comments: 17 (9 by maintainers)

Most upvoted comments

Hey @colangeloproductions 👋

@storybook/preset-scss is deprecated and shouldn’t be used.

Instead use @storybook/addon-styling

+2
ShaunEvening on Mar 31, 2023

Hey @mpruser,

@storybook/addon-styling-webpack requires options in order for it to work. If you’re looking for sass configuration, you’ll need something like so:

{
  name: getAbsolutePath("@storybook/addon-styling-webpack"),
  options: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        sideEffects: true,
        use: [
          require.resolve("style-loader"),
          {
            loader: require.resolve("css-loader"),
            options: {
              importLoaders: 2,
            },
          },
          require.resolve("resolve-url-loader"),
          {
            loader: require.resolve("sass-loader"),
            options: {
              // Want to add more Sass options? Read more here https://webpack.js.org/loaders/sass-loader/#options
              implementation: require.resolve("sass"),
              sourceMap: true,
              sassOptions: {},
            },
          },
        ],
      },
    ],
  },
}
+1
ShaunEvening on Oct 4, 2023

Hey @colangeloproductions 👋

@storybook/preset-scss is deprecated and shouldn’t be used.

Instead use @storybook/addon-styling

☝️ this has now been deprecated as well: https://storybook.js.org/addons/@storybook/addon-styling/

What’s the official guidance now for using Sass with Storybook 7?

+1
mattdell on Sep 20, 2023

Sounds good! If you have any questions about writing Storybook addons, let me know 😁

+1
ShaunEvening on May 10, 2023

@Integrayshaun I see, thanks. Because its just a simple internal addon for the company ill just be using regular css for now 😃

+1
colangeloproductions on May 10, 2023
Read more comments on GitHub
← storybook: [Bug]: Cannot read properties of undefined (reading 'fonts') with `addon-docs`
storybook: [Bug]: Config.base not getting appended correctly  →