Unable to add custom styles to project

[stephh939]

Summary

I am having an issue with Storybook and Webpack 5 when adding custom styles.

In this application there are many Nx Console projects and one of the projects that I am adding Storybook to is called: shared-ui-components-v3. Ideally, I would like to add the global style from a different file into the build-storybook and storybook targets in my project.json but for now I wrote a simple style.scss file within the project (shared-ui-components-v3) and am including it in the "styles" section in the project.json file.

Even with writing a local style.scss file and trying to include it in the project.json, it is not working and I am getting the below error(s) when running build-storybook and storybook commands. The only way to remove the error(s) is to completely remove the link to any style sheet in the project.json file and then I can run my Storybook instance and view my stories in the browser, but they are not styled correctly.

Because there are many Nx Console projects in this directory I am running the build-storybook and storybook command per-project in the root directory. For example I am in the root directory: dbaasui and I am running the commands "nx run shared-ui-components-v3:build-storybook" and "nx run shared-ui-components-v3:storybook" to build and run storybook.

From what I understand with lots of googling and research I believe that these errors are trying to say that the style.scss sheet that I am trying to include in my project.json file is not being found/seen and I am not sure how to address this issue.

My project is an Angular project running the latest versions of angular and webpack

Additional information

Errors when running "nx run shared-ui-components-v3:build-storybook":

`=> Failed to build the preview
SB_BUILDER-WEBPACK5_0002 (WebpackInvocationError): Compilation cannot be undefined.
at .\node_modules@storybook\angular\node_modules@storybook\builder-webpack5\dist\index.js:1:10546
at .\node_modules\webpack\lib\HookWebpackError.js:68:3
at Hook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), :11:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (.\node_modules\tapable\lib\Hook.js:18:14)
at Cache.shutdown (.\node_modules\webpack\lib\Cache.js:156:23)
at .\node_modules\webpack\lib\Compiler.js:1358:15
at Hook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (.\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.close (.\node_modules\webpack\lib\Compiler.js:1351:23)
at .\node_modules@storybook\angular\node_modules@storybook\builder-webpack5\dist\index.js:1:10531
NX Broken build, fix the error above.
You may need to refresh the browser.

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

NX Ran target build-storybook for project shared-ui-components-v3 (19s)

× 1/1 failed
√ 0/1 succeeded [0 read from cache]
`

Error when running "nx run shared-ui-components-v3:storybook"

[webpack-dev-middleware] AssertionError [ERR_ASSERTION]: Compilation cannot be undefined. at Object.webpackOptions.entry (C:\Users\rus9so\DBaaS\packages\angular_devkit\build_angular\src\tools\webpack\plugins\styles-webpack-plugin.ts:65:21) { generatedMessage: false, code: 'ERR_ASSERTION', actual: undefined, expected: true, operator: '==' }

Project file structure:

dbaasui
|_ _apps
|	|_ _console
|		|_ _ src
|			|_ _ styles.scss       <-- I want this global style sheet in the project.json file in ui-components-v3                                                                 
|_ _libs
	|_ _shared
		|_ _ui-components-v3
			|_ _src
			|	|_ _ testStyles.scss    
			|_ _ project.json

### Project.json file in ui-components-v3

"storybook": {
      "executor": "@storybook/angular:start-storybook",
      "options": {
        "port": 4400,
        "configDir": "libs/shared/ui-components-v3/.storybook",
        "browserTarget": "shared-ui-components-v3:build-storybook",
        "compodoc": false,
        "styles": ["src/testStyles.scss"]                  <--- This line of code is the issue
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "build-storybook": {
      "executor": "@storybook/angular:build-storybook",
      "outputs": ["{options.outputDir}"],
      "options": {
        "outputDir": "dist/storybook/shared-ui-components-v3",
        "configDir": "libs/shared/ui-components-v3/.storybook",
        "browserTarget": "shared-ui-components-v3:build-storybook",
        "compodoc": false,
        "styles": ["src/testStyles.scss"]                 <--- This line of code is the issue
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },

Create a reproduction

No response

[Marklb]

I am not too familiar with Nx, but I am with Angular. It does seem that you are doing it correctly, from the description. I know Angular has issues with files outside of the project root, but I don't think that is the issue here, because I think those are usually clear error messages.

When I see Webpack compiler or hook errors, it is usually mixed Webpack versions. Have you tried deleting node_modules, package-lock.json, .angular and any other dependency/cache related files/folders then reinstalling them? If you had something with a Webpack dependency then added another dependency with a Webpack dependency, the second one may have been unsure if it could replace the existing version and installed another version. A fresh Reinstall of dependencies, usually clears up those errors. You should be able to see the two versions, if you check your lock file, but unless you have a reason to not just regenerate the lock file then you shouldn't have to bother checking.

My only reason to think it may not be a mixed version issue, is that you can run it without the styles, but maybe the styles plugin is the only one that is on the wrong version and Angular could be excluding the plugin if no styles.

[stephh939]

Hi @Marklb,

Thank you for the advice and I'll give it a go! I honestly didn't think about deleting node_modules, package-lock.json, and .angular but that's a great idea. I'll try it out and report back.

[stephh939]

@Marklb

I cleaned out everything and unfortunately this did not work. I am going to look into Webpack and see if this is a weird Webpack issue. I appreciate your help.