Configuring Storybook with Angular/Ionic/Nx

[leahbanks]

Summary

Hi! I have Storybook running in my Nx Angular project, however I have Ionic components that are not rendering correctly and the correct styles are not applied. I can see the styles when I inspect the stories in the browser, but they are not visible. I'm unable to find any documentation for using Storybook with Ionic so I'm hoping that someone could help with this by outlining how Storybook should be configured when using Ionic/Angular and Nx. I have included the path to my global scss file in the project.json, which has all of the ionic styling imported. I have also tried to import it in the preview.ts file, but I get the following error:

Module parse failed: Unexpected character '@' (12:0)
File was processed with these loaders:
 * ./node_modules/resolve-url-loader/index.js
 * ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|  */
| /* Core CSS required for Ionic components to work properly */
> @import '@ionic/angular/css/core.css';
| /* Basic CSS for apps built with Ionic */
| @import '@ionic/angular/css/normalize.css';
 @ ./libs/.../.storybook/preview.ts 8:0-61
 @ ./storybook-config-entry.js 5:1140-1220 24:2-29:4 24:1096-29:3

Any help would be appreciated. Thanks :)

Nx v20.1.4
Angular v18.2.12
Ionic v7.2.0

Additional information

This is my current main.ts file:

import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
    stories: ['../**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
    ],
    framework: {
        name: '@storybook/angular',
        options: {},
    },
};

export default config;

module.exports = {
    webpackFinal: async (config: {
        resolve: { fallback: any; };
        module: {
            rules: {
                test: RegExp;
                use: (string | { loader: string; options: { sassOptions: { includePaths: any[]; }; }; })[];
                include: any;
            }[];
        };
    }) => {
        config.resolve.fallback = {
            ...config.resolve.fallback,
            tty: require.resolve('tty-browserify'),
            os: require.resolve('os-browserify/browser'),
        };

        return config;
    },
};

This is my current project.json:

{
    "name": "<project-name>",
    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
    "projectType": "library",
    "sourceRoot": "libs/frontend/ui/src",
    "prefix": "app",
    "tags": ["type:ui"],
    "targets": {
        "test": {
            "executor": "@nx/jest:jest",
            "outputs": ["{workspaceRoot}/coverage/libs/frontend/ui"],
            "options": {
                "jestConfig": "libs/frontend/ui/jest.config.ts"
            }
        },
        "lint": {
            "executor": "@nx/eslint:lint"
        },
        "storybook": {
            "executor": "@storybook/angular:start-storybook",
            "options": {
                "port": 4400,
                "configDir": "libs/frontend/ui/.storybook",
                "browserTarget": "<project-name>-frontend-ui:build-storybook",
                "compodoc": false,
                "styles": [
                    "libs/frontend/ui/src/lib/styles/global.scss"
                ],
                "stylePreprocessorOptions": {
                    "includePaths": [
                        "libs/frontend/ui/src/lib/styles/global.scss"
                    ]
                }
            },
            "configurations": {
                "ci": {
                    "quiet": true
                }
            }
        },
        "build-storybook": {
            "executor": "@storybook/angular:build-storybook",
            "outputs": ["{options.outputDir}"],
            "options": {
                "outputDir": "dist/storybook/<project-name>",
                "configDir": "libs/frontend/ui/.storybook",
                "browserTarget": "<project-name>i:build-storybook",
                "compodoc": false
            },
            "configurations": {
                "ci": {
                    "quiet": true
                }
            }
        },
        "test-storybook": {
            "executor": "nx:run-commands",
            "options": {
                "command": "test-storybook -c libs/frontend/ui/.storybook --url=http://localhost:4400"
            }
        },
        "cli": {
            "schematicCollections": [
                "@ionic/angular-toolkit"
            ]
        },
        "schematics": {
            "@ionic/angular-toolkit:component": {
                "styleext": "scss"
            },
            "@ionic/angular-toolkit:page": {
                "styleext": "scss"
            }
        }
    }
}

Create a reproduction

No response

[prestopasto]

@leahbanks I'm running into the same issue. It would be greatly appreciated if you would post here if you find a solution. I'll comment if I can figure it out.