Nx: Angular Storybook doesnt load scss

[stckcrsh]

_Please make sure you have read the submission guidelines before posting an issue_

Prerequisites

Please answer the following questions for yourself before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• [✔️] I am running the latest version
• [✔️] I checked the documentation and found no answer
• [✔️] I checked to make sure that this issue has not already been filed
• [✔️] I'm reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

I expect that a library angular components running storybook will load scss files like it does if i just ran the storybook configs myself

Current Behavior

The component gets compiled but all the scss files are not created/imported.

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. npx create-nx-workspace example-scss (create using scss and add an angular application)
2. ng g @nrwl/angular:library scss --directory=ui-kit
3. ng g c test-scss --project=ui-kit-scss
4. ng g @nrwl/angular:storybook-configuration ui-kit-scss --configureCypress=false --generateCypressSpecs=false --generateStories=true
5. add some styles to the scss file
   echo "p { background-color: red; }" >> libs/ui-kit/scss/src/lib/test-scss/test-scss.component.scss
6. ng run ui-kit-scss:storybook

The component component should have a red background but does not.

[stckcrsh]

I found that if I just delete the webpack.config.js it starts to work so I think there is an issue with the webpack config or its just not needed

[kristofdegrave]

I also noticed that.

Another solution is, to just remove the following parts in the webpack.config.js in the .storybook folder:

let scssLoader = config.module.rules.find(i => !!'a.scss'.match(i.test));
  if (scssLoader && scssLoader.use) {
    scssLoader.use = ['to-string-loader', ...scssLoader.use];
  }

  let htmlLoader = config.module.rules.find(i => !!'a.html'.match(i.test));
  if (htmlLoader) {
    htmlLoader.loader = 'html-loader';
  }

[isaacplmann]

The webpack config changes were there to workaround an issue that has since been fixed in storybook.

[vsavkin]

The fix is merged: https://github.com/nrwl/nx/pull/2128