Importing global styles into an Angular component is not working [or documentation is outdated]

Greetings Team Storybook!

Describe the bug I am using an Nx Workspace v12.x with Angular v11.2.9. According to your documentation located here: https://storybook.js.org/docs/angular/get-started/setup It says to include global styles in .storybook/preview.js

This is my preview.js for my specific component (Note; this is not my global preview.js)

import { addDecorator } from '@storybook/angular';
import { withKnobs } from '@storybook/addon-knobs';
import 'shared-styles/booking-engine/theme/default/styles.scss';

addDecorator(withKnobs);

My main.js looks like this:

module.exports = {
  stories: [],
  addons: [
    '@storybook/addon-viewport',
    '@storybook/addon-links',
    '@storybook/addon-knobs',
    '@storybook/addon-docs',
  ]
};

The storybook starts but there is no global style added. Other documentation on the interwebz refers to have a main.js file that is configured something like this:

module.exports = {
  stories: [],
  addons: [
    '@storybook/addon-viewport',
    '@storybook/addon-links',
    '@storybook/addon-knobs',
    '@storybook/addon-docs',
    '@storybook/preset-scss'
  ],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

This also does not work and will make the storybook not even start with a big fat error.

I start up my Storybook like this: nx run booking-engine-ui-booking-entry:storybook --https=true --ssl-key server.key --ssl-cert server.crt

The entire startup log can be found below:

info => Loading presets
info => Loading 1 config file in "/Users/crash/git/iko-travel-spa/libs/booking-engine/ui-booking-entry/.storybook"
info => Loading 4 other files in "/Users/crash/git/iko-travel-spa/libs/booking-engine/ui-booking-entry/.storybook"
info => Adding stories defined in "/Users/crash/git/iko-travel-spa/libs/booking-engine/ui-booking-entry/.storybook/main.js"
info => Found custom tsconfig.json
info => Using implicit CSS loaders
ℹ ｢wdm｣: wait until bundle finished: 
info => Using angular project 'workspace' for configuring Storybook.
ERR! architect.build is not defined for project 'workspace'.
info => Loading angular-cli config.
info => Loading custom Webpack config (full-control mode).
Starting type checking service...
(node:24726) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
[BABEL] Note: The code generator has deoptimised the styling of /Users/crash/git/iko-travel-spa/node_modules/prettier/standalone.js as it exceeds the max of 500KB.
ℹ ｢wdm｣: wait until bundle finished: /__webpack_hmr
ℹ ｢wdm｣: Hash: 9933fd865aa990d7a77b
Version: webpack 4.46.0
Time: 22583ms
Built at: 04/11/2021 7:54:12 PM
                         Asset      Size        Chunks                    Chunk Names
           0.manager.bundle.js   105 KiB             0  [emitted]         
           1.manager.bundle.js   207 KiB             1  [emitted]         
           2.manager.bundle.js   372 KiB             2  [emitted]  [big]  
           3.manager.bundle.js  15.1 KiB             3  [emitted]         
           4.manager.bundle.js  1.36 KiB             4  [emitted]         
                    index.html  2.38 KiB                [emitted]         
        main.manager.bundle.js  3.91 KiB          main  [emitted]         main
runtime~main.manager.bundle.js  8.95 KiB  runtime~main  [emitted]         runtime~main
vendors~main.manager.bundle.js  3.27 MiB  vendors~main  [emitted]  [big]  vendors~main
Entrypoint main [big] = runtime~main.manager.bundle.js vendors~main.manager.bundle.js main.manager.bundle.js
[0] multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js ./node_modules/@storybook/addon-viewport/dist/esm/register.js ./node_modules/@storybook/addon-links/dist/esm/register.js ./node_modules/@storybook/addon-knobs/dist/esm/register.js ./node_modules/@storybook/addon-docs/dist/esm/register.js ./libs/booking-engine/ui-booking-entry/.storybook/generated-refs.js 100 bytes {main} [built]
[./libs/booking-engine/ui-booking-entry/.storybook/generated-refs.js] 101 bytes {main} [built]
[./node_modules/@storybook/addon-docs/dist/esm/register.js] ./node_modules/@storybook/addon-docs/dist/esm/register.js + 1 modules 1020 bytes {vendors~main} [built]
    | ./node_modules/@storybook/addon-docs/dist/esm/register.js 625 bytes [built]
    | ./node_modules/@storybook/addon-docs/dist/esm/shared.js 380 bytes [built]
[./node_modules/@storybook/addon-knobs/dist/esm/register.js] ./node_modules/@storybook/addon-knobs/dist/esm/register.js + 42 modules 276 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/register.js 585 bytes [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/shared.js 448 bytes [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/Panel.js 13.9 KiB [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/title.js 355 bytes [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/types/index.js 885 bytes [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/PropForm.js 5.15 KiB [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/types/Text.js 4.63 KiB [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/types/Number.js 6.14 KiB [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/types/Color.js 6.8 KiB [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/types/Boolean.js 1.19 KiB [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/types/Object.js 5.86 KiB [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/types/Select.js 4.59 KiB [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/types/Radio.js 5.9 KiB [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/types/Array.js 6.51 KiB [built]
    | ./node_modules/@storybook/addon-knobs/dist/esm/components/types/Date.js 9.82 KiB [built]
    |     + 28 hidden modules
[./node_modules/@storybook/addon-links/dist/esm/register.js] ./node_modules/@storybook/addon-links/dist/esm/register.js + 1 modules 629 bytes {vendors~main} [built]
    | ./node_modules/@storybook/addon-links/dist/esm/register.js 394 bytes [built]
    | ./node_modules/@storybook/addon-links/dist/esm/constants.js 225 bytes [built]
[./node_modules/@storybook/addon-viewport/dist/esm/register.js] ./node_modules/@storybook/addon-viewport/dist/esm/register.js + 3 modules 14.1 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/register.js 514 bytes [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/constants.js 316 bytes [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/Tool.js 10.2 KiB [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/defaults.js 2.98 KiB [built]
[./node_modules/@storybook/addons/dist/esm/public_api.js] ./node_modules/@storybook/addons/dist/esm/public_api.js + 4 modules 22.4 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addons/dist/esm/public_api.js 515 bytes [built]
    | ./node_modules/@storybook/addons/dist/esm/index.js 2.95 KiB [built]
    | ./node_modules/@storybook/addons/dist/esm/make-decorator.js 1.75 KiB [built]
    | ./node_modules/@storybook/addons/dist/esm/storybook-channel-mock.js 226 bytes [built]
    | ./node_modules/@storybook/addons/dist/esm/hooks.js 16.9 KiB [built]
[./node_modules/@storybook/core-client/dist/esm/manager/index.js] ./node_modules/@storybook/core-client/dist/esm/manager/index.js + 77 modules 517 KiB {vendors~main} [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/index.js 309 bytes [built]
    | ./node_modules/@storybook/ui/dist/esm/index.js 2.94 KiB [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/provider.js 4.06 KiB [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/conditional-polyfills.js 720 bytes [built]
    | ./node_modules/react-helmet-async/lib/index.module.js 12 KiB [built]
    | ./node_modules/@storybook/ui/dist/esm/app.js 4.22 KiB [built]
    | ./node_modules/@storybook/ui/dist/esm/provider.js 1.29 KiB [built]
    | ./node_modules/@storybook/channel-postmessage/dist/esm/index.js 11 KiB [built]
    | ./node_modules/@storybook/ui/dist/esm/components/layout/mobile.js 8.67 KiB [built]
    | ./node_modules/@storybook/ui/dist/esm/components/layout/desktop.js 2.82 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/spaced/Spaced.js 3.13 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/brand/StorybookLogo.js 4.86 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/Badge/Badge.js 1.63 KiB [built]
    | ./node_modules/@storybook/ui/dist/esm/containers/sidebar.js 1.57 KiB [built]
    | ./node_modules/@storybook/components/dist/esm/Loader/Loader.js 8.26 KiB [built]
    |     + 63 hidden modules
[./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 359 bytes {vendors~main} [built]
[./node_modules/core-js/modules/es.array.concat.js] 2.37 KiB {vendors~main} [built]
[./node_modules/core-js/modules/es.function.name.js] 673 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/react/index.js] 190 bytes {vendors~main} [built]
    + 957 hidden modules
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.47 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core-server/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 1.97 KiB {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled successfully.
webpack built preview e2e5d2436f100298bcc0 in 38361ms
╭─────────────────────────────────────────────────╮
│                                                 │
│   Storybook 6.2.7 started                       │
│   23 s for manager and 40 s for preview         │
│                                                 │
│    Local:            https://localhost:4400/    │
│    On your network:  https://localhost:4400/    │
│                                                 │
╰─────────────────────────────────────────────────╯

I would love it it there I can see a sample Nx Angular mono repo with a Storybook using a global style. I have looked on the entire Interwebz all day today without luck.

There is a closed ticket in your repo that doesn’t give me anything to go by here: https://github.com/storybookjs/storybook/issues/6364

I found an outstanding question on Stack Exchange with the same question here: https://stackoverflow.com/questions/62888353/angular9-nx-storybook-why-are-my-scss-styles-getting-ignored-in-storybook

Please help!!!

[bjornharvold]

Hi @ThibaudAV

Your above suggestion gives me a “path is not defined” so didn’t continue down that road.

Global styles work when I add a default project. Will just have to change the default project depending on which app I am working on at the moment. We are just starting to use StorybookJS so it won’t get too much into advanced use cases like running Cypress with StorybookJS any time soon.

Hope you don’t mind. I will create a feature request ticket for what we discussed here.

Thank you for your help and assistance.

[ThibaudAV]

with this maybe it works : 🤷‍♂️

  const sassLoaderRule = {
    test: /\.s[ac]ss$/i,
    use: [
      {
        loader: 'sass-loader',
        options: {
          additionalData: `
					@import '${path.resolve(__dirname, '../src/styles.scss')}';
				`,
        },
      },
    ],
  };
  config.module.rules.push(sassLoaderRule);

but i’m not a webpack expert. i don’t know if there is a better way to do it

But I have the impression that it is incompatible if you resolve this error ERR! architect.build is not defined for project 'workspace'. to let storybook use angular-cli to do this job 🤷‍♂️