Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SassError: Can't find stylesheet to import on Angular 13 #16821

Closed
flashart92 opened this issue Nov 29, 2021 · 2 comments
Closed

SassError: Can't find stylesheet to import on Angular 13 #16821

flashart92 opened this issue Nov 29, 2021 · 2 comments

Comments

@flashart92
Copy link

flashart92 commented Nov 29, 2021

Describe the bug
I just upgraded to Angular 13 and Storybook now fails to build:

SassError: Can't find stylesheet to import.
  ╷
1 │ @use './common-styles/common-styles' as styles;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ..\..\..\libs\ui-modals\browser\src\lib\dialog-modal\modal-dialog-layout\styles\_modal-dialog-layout.web.scss 1:1        @use
  ..\..\..\libs\ui-modals\browser\src\lib\dialog-modal\modal-dialog-layout\styles\modal-dialog-layout.master.web.scss 1:1  root stylesheet
    at processResult (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:751:19)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:853:5
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.callback (D:\PROJ\service-front\service-front\node_modules\sass-loader\dist\index.js:54:7)
    at Worker.<anonymous> (D:\PROJ\service-front\service-front\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:123:25)
    at Worker.emit (events.js:400:28)
    at MessagePort.<anonymous> (internal/worker.js:215:53)
    at MessagePort.[nodejs.internal.kHybridDispatch] (internal/event_target.js:399:24)
    at MessagePort.exports.emitMessage (internal/per_context/messageport.js:18:26)
    at MessagePort.callbackTrampoline (internal/async_hooks.js:131:17)

I do have style settings in my angular.json:

 "styles": [
                            "src/styles.scss"
                        ],
                        "stylePreprocessorOptions": {
                            "includePaths": [
                                "../../../../libs/base-content/common/assets",
                                "../node_modules/@abanking/base-content/common/assets/"
                            ]
                        },

I use in scss files @use './common-styles/common-styles' as styles;.

Package versions:
"@storybook/addon-actions": "6.4.0",
"@storybook/addon-controls": "6.4.0",
"@storybook/addon-essentials": "6.4.0",
"@storybook/addon-jest": "6.4.0",
"@storybook/addon-links": "6.4.0",
"@storybook/angular": "6.4.0",
"@storybook/builder-webpack5": "6.4.0",
"@storybook/manager-webpack5": "6.4.0",
"@angular/animations": "13.0.2",
"@angular/cdk": "13.0.2",
"@angular/common": "13.0.2",
"@angular/compiler": "13.0.2",
"@angular/core": "13.0.2",
"@angular/forms": "13.0.2",
"@angular/platform-browser": "13.0.2",
"@angular/platform-browser-dynamic": "13.0.2",
"@angular/router": "13.0.2",

Previously, there were versions of packages
"@storybook/addon-essentials": "6.4.0-alpha.34",
"@storybook/addon-jest": "6.4.0-alpha.34",
"@storybook/addon-links": "6.4.0-alpha.34",
"@storybook/angular": "6.4.0-alpha.34",
"@storybook/builder-webpack5": "6.4.0-alpha.34",
"@storybook/manager-webpack5": "6.4.0-alpha.34",
"@angular/animations": "12.1.3",
"@angular/cdk": "12.1.3",
"@angular/common": "12.1.3",
"@angular/compiler": "12.1.3",
"@angular/core": "12.1.3",
"@angular/forms": "12.1.3",
"@angular/platform-browser": "12.1.3",
"@angular/platform-browser-dynamic": "12.1.3",
"@angular/router": "12.1.3",

and everything worked for them

System
Environment Info:
System:
OS: windows 11
CPU: AMD Ryzen 9 5900HX
Binaries:
Node: v14.17.6
npm: 6.14.15
Browsers:
Chrome: 96.0.4664.45

@ghost
Copy link

ghost commented Nov 29, 2021

Probably related to #16802. Styling seems to be broken for Angular 13 & SB 6.4 at the moment ... even just regular in app global styles do not get included.

@shilman
Copy link
Member

shilman commented Nov 29, 2021

closing as dupe to #16802

@shilman shilman closed this as completed Nov 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants