Angular 19 Storybook Can't Compile scss

I am trying to set up an angular library with storybook and I keep running into stylesheet issues (ng g library reusable-components) but it can't compile the scss and I keep getting an error message:

Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
expected "{".
╷
2 │ import API from "!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
│ ^
╵
projects\reusable-components\src\lib\button\button.scss 2:107 root stylesheet
ERROR in ./projects/reusable-components/src/common/_brand.scss
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
expected "{".
╷
2 │ import API from "!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
│ ^
╵
projects\reusable-components\src\common\_brand.scss 2:104 root stylesheet


Here is my angular.json

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"reusable-components": {
"projectType": "library",
"root": "projects/reusable-components",
"sourceRoot": "projects/reusable-components/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/reusable-components/ng-package.json"

},

"configurations": {
"production": {
"tsConfig": "projects/reusable-components/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/reusable-components/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"tsConfig": "projects/reusable-components/tsconfig.spec.json",
"polyfills": [
"zone.js",
"zone.js/testing"
]
}
},
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
"configDir": "projects/reusable-components/.storybook",
"browserTarget": "reusable-components:build",
"compodoc": false,
"port": 6006
}
},
"build-storybook": {
"builder": "@storybook/angular:build-storybook",
"options": {
"configDir": "projects/reusable-components/.storybook",
"browserTarget": "reusable-components:build",
"compodoc": false,
"outputDir": "storybook-static"
}
}
}
}
},
"cli": {
"analytics": false
}
}


ng-package.json

"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/reusable-components",
"lib": {
"entryFile": "src/public-api.ts",
"styleIncludePaths": [
"src/common"
],
"stylePreprocessorOptions": {
"includePaths": [
"."
]
},
"flatModuleFile": "",
"cssUrl": "none",
"sass": {}
}
}


main.ts

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

const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|mjs|ts)"],
addons: [
"@storybook/addon-onboarding",
"@storybook/addon-essentials",
"@chromatic-com/storybook",
"@storybook/addon-interactions",
"@storybook/addon-styling"
],
framework: {
name: "@storybook/angular",
options: {},
},
webpackFinal: async (config, {configType}) => {
// Add support for SCSS files
config.module?.rules?.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: /src/,
});
return config;
}
};
export default config;


preview.ts

import type { Preview } from "@storybook/angular";
import '@storybook/addon-styling';
import '../src/common/_brand.scss'

const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};

export default preview;


Can anyone spot where my issue is? I can't seem to resolve the issue with the solutions I foumd

Continue reading...