Storybook: Global style not loaded in Angular

[aloifolia]

Describe the bug
I want to include a stylesheet file in my stories globally. However, the file is not loaded. My angular.json looks like this (the last line contains the style inclusion):

{
    "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "my-project": {
            "root": "..",
            "sourceRoot": ".",
            "projectType": "application",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist",
                        "index": "./components/root/static/index.html",
                        "main": "./app.entry.ts",
                        "tsConfig": "./tsconfig.json",
                        "polyfills": "./app/app.dependencies.ts",
                        "assets": ["app/assets"],
                        "styles": ["app/assets/style/style.scss"],

System:

• OS: MacOS
• Browser: chrome
• Framework: angular 7.2
• Version: Storybook 4.1.4

[mrkpks]

Same problem with Storybook 4.1.6. Tried various solutions with webpack.config.ts but nothing worked. Component styles are loaded fine.

• sass-loader used by storybook cannot resolve global styles (and global imports inside components).
• component styles are untouched if no global styles are used inside

Main problem: using global imports inside of a component e.g. @import '~src/styles/variables or @import 'variables' will end up with storybook compilation error:

ERROR in ./src/app/tab2/example/example.component.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js):

Either File to import not found or unreadable: ~src/styles/variables. or File to import not found or unreadable: variables.

PS I have set preprocessor options like this:

"stylePreprocessorOptions": {
  "includePaths": [
    "src",
    "src/styles"
  ]
},

[ThibaudAV]

Same problem when I updated the different angular dependencies from 7.1.4 to 7.2.1

[sunlanterns]

I'm running into this issue too. It seems like storybook isn't picking up the angular.json file correctly anymore as of Angular 7.2 - I've seen a message when I compile that says storybook can't find the angular.json file, even though it's definitely there.

[kommundsen]

I have the samme issue after upgrading to Angular 7.2.1.

[yjcxy12]

Looks like this is breaking change.
https://github.com/angular/angular-cli/commit/4f8a5b7a55316f773c1ae80505864212dc278b6a#diff-ef298d20cc5b49a2407cabad6876a7b4R23

And this line might need to add buildOptions.optimization and buildOptions.sourceMap as empty object by default.
https://github.com/storybooks/storybook/blob/v4.1.11/app/angular/src/server/angular-cli_config.js#L90

[crushjz]

Following this as I'm having the same issue.

[MarkoSulamagi]

Hey, any updates on this? We had to downgrade 2 angular devkit packages so storybook could read angular.json. But this isn't really a viable solution.

Storybook can read angular.json with the following packages

    "@angular-devkit/build-angular": "~0.10.7",
    "@angular-devkit/build-ng-packagr": "~0.10.7",

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[aloifolia]

Well, as long as it is not fixed, the bug should stay open.

[shilman]

Whoopee!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-rc.7 containing PR #5776 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.