Storybook: Global styling and CSSresource in Storybook 5.0.0 doesn't work.

[codestitch]

Describe the bug
Just installed SB 5.0.0 and tried adding global styles such as preview-head.html w/ bootstrap4 in .storybook/ folder.

Added import '!style-loader!css-loader!../stories/styles.scss'; in .storybook/config.js and didn't reflect.
Tried using CSSResource addon and didn't work.

To Reproduce
Steps to reproduce the behavior:

1. Navigate to angular project and install SB5 npx -p @storybook/cli sb init
2. Create global styles in /stories/ like styles.scss or styles.less.
3. Import in config.js import '!style-loader!css-loader!../stories/styles.scss';
4. See changes

Using CSS

1. install css resources
2. follow documentation
3. see changes

Expected behavior
Should see applied global styling

Screenshots
The default paragraph is tooooo small. Tried fixing it by adding global styles but didn't work.

Code snippets
styles.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

body {
   background-color: skyblue;

   p {
      font-size: 30px;
   }
}
p {
   font-size: 30px;
}

config.js

import { configure } from '@storybook/angular';

// require('../stories/styles.less'); // less does not work
// import "../stories/styles.scss"; // does not work
import '!style-loader!css-loader!../stories/styles.scss'; // does not work

// automatically import all files ending in *.stories.ts
const req = require.context('../stories', true, /.stories.ts$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

webpack.config.js

const path = require('path');
const webpack = require('webpack');

const libPath = path.resolve('libs');

module.exports = {
   module: {
      rules: [
         {
            test: /\.less$/,
            loaders: ["style-loader", "css-loader", "less-loader"],
            include: path.resolve(__dirname, "../")
         }
      ]
   },
   plugins: [
      new webpack.NormalModuleReplacementPlugin(/@gs/, function (resource) {
         resource.request = resource.request.replace(/@gs/, libPath);
      })
   ]
}

package.json

  "@angular/animations": "^7.1.3",
    "@angular/cdk": "^7.1.1",
    "@angular/common": "^7.0.0",
    "@angular/compiler": "^7.0.0",
    "@angular/core": "^7.0.0",
    "@angular/forms": "^7.0.0",
    "@angular/material": "^7.1.1",
    "@angular/material-moment-adapter": "^7.1.1",
    "@angular/platform-browser": "^7.0.0",
    "@angular/platform-browser-dynamic": "^7.0.0",
...
  "@storybook/addon-actions": "^5.0.0",
    "@storybook/addon-cssresources": "^5.0.0",
    "@storybook/addon-links": "^5.0.0",
    "@storybook/addon-notes": "^5.0.0",
    "@storybook/addons": "^5.0.0",
    "@storybook/angular": "^5.0.0",

preview-head.html

<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
crossorigin="anonymous">

System:

• OS: Windows10
• Device: DELL laptop
• Browser: Chrome
• Framework: Angular
• Addons: CSSResource
• Version: 5.0.0

Additional context
Add any other context about the problem here.

[amensouissi]

hello :)
same problem here :(

[shilman]

@nm123github any chance you can take a look?

[codestitch]

Sorry, to waste your time. I just found out that this happened because, the iframe in SB in getting styles from whatever you declare in your app in angular.json file. So, I think there was a conflict that happen.

I'm using NX and have 3 different apps.
App1 uses bootstrap3 and clarity.
App 2 uses clarity.
App 3 uses angular material.

So, SB seems to get all the styles in App1 w/c is bootstrap3 and clarity - that's why I have that output.
So for @amensouissi, maybe you should check your styles if you have lots of styles there. and check the iframes head what styles were included.

If only I could find a way to tell SB to only use 1 base UI library, like clarity. I'll just create another case for that.

I'm closing this one.

[adelina29]

@codestitch , do you found a solution on this?