storybook: loading shared styles with sass-loader is broken

[gkamperis]

Current Behavior

Importing shared scss into a Storybook via

// preview.js 
// tried both in the lib's .storybook and the main repo top-level .storybook (neither work)
import "!style-loader!css-loader!sass-loader!../src/styles/styles.scss";

is not working via Nx.

NOTE: It is working with the standard Storybook setup following
https://storybook.js.org/tutorials/intro-to-storybook/angular/en/get-started/
and adding custom "shared" scss

Expected Behavior

Expect this to work as per default Storybook - was also working in the past...

Steps to Reproduce

Create an Nx workspace with shared styles as per Nx example repo.
https://github.com/nrwl/nx-examples

Import the shared styles via

// preview.js
import "!style-loader!css-loader!sass-loader!../src/styles/styles.scss";

Another report of the same issue here
#7613 (comment)

Failure Logs

No logs are created.

Environment

Nx 13.7.3
Angular 13.2.1
@storybook-angular 6.4.18

[mandarini]

Hi there @gkamperis ! Thanks for filing an issue!

Can you let me know if this comment helps? Also, if any of these issues help:

#8790
#8772
#8681
#8580
#8360

[mandarini]

Also, please take a look at this comment in this issue here. That is, you can use a format like this in your project:

    "build-storybook": {
      "executor": "@nrwl/storybook:build",
      "options": {
        "uiFramework": "@storybook/angular",
         ...
        "projectBuildConfig": "<YOUR-LIB-NAME>:build-storybook",
        "stylePreprocessorOptions": {
          "includePaths": ["SOME-PATH", "EG. OTHER PATH: node_modules/@angular/flex-layout/core/sass"]
        }
      },
    ...
    },

[gkamperis]

Hello @mandarini

thanks for the quick response.

"stylePreprocessorOptions": {
          "includePaths": ["SOME-PATH", "EG. OTHER PATH: node_modules/@angular/flex-layout/core/sass"]
        }

seems to have no effect.

"styles": ["path/to/style.scss"]

seems to work but... it is different to
import "!style-loader!css-loader!sass-loader!../src/styles/styles.scss";

for example it does not load svgs...
in our style.scss we reference @import 'node_modules/@fortawesome/fontawesome-free/scss/solid';

with sass-loader we compile correctly.

with styles the build breaks as it mixes up the location of the svg paths and tries to locate them under my styles path vs node_modules/@fortawesome

Any ideas on how to get around this?

Thanks

[gkamperis]

@mandarini wow this is mind-boggling!

// file: path/to/style.scss

@import 'node_modules/@fortawesome/fontawesome-free/scss/solid';

// file: angular.json
// under storybook configs

"styles": ["path/to/style.scss"]

breaks with svgs not found as mentioned in the previous comment confusing the paths (node_modules vs shared/style/paths).

But... if I just rename the file and update the config accordingly...

styles.scss to styles2.scss

it works! svgs are resolved correctly no compilation error and icons shown correctly!

[gkamperis]

@mandarini I figured it out....

turns out... I forgot to remove

import "!style-loader!css-loader!sass-loader!../src/styles/styles.scss";

and that was somehow causing issues.

once removed styles.scss in angular.json is ok...

On a final note... it would be good to update the docs with the styles property as well - and any other ones supported... :)

https://nx.dev/storybook/overview-angular#setting-up-projectbuildconfig

Pls feel free to close this issue.

Thanks!

[mandarini]

Yes, updating the docs is in the roadmap! :) Thank you!

[mandarini]

New docs for styles and stylePreprocessorOptions

[gkamperis]

@mandarini amazing! thanks for all your help!

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.