How to set up webpack config for Angular 6 stylePreprocessorOptions

If you are reporting a bug or requesting support, start here:

Bug or support request summary

Please provide issue details here - What did you expect to happen? What happened instead? In my angular 6 config, I am using stylePreprocessorOptions:

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

https://github.com/dereklin/nrwl-nx-workspace-demo/blob/trying-storybook-with-ng6/angular.json

This allows me to import css partials like:

@import 'variables';

When trying to set up webpack config for it, I am encountering these errors:

ERROR in ./libs/fancy-box/src/lib/fancy-box.component.scss
Module build failed (from ./node_modules/@storybook/angular/node_modules/sass-loader/lib/loader.js):

:host {
^
      Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
      in /Users/delin/sandbox/nrwl-nx-workspace-demo/libs/fancy-box/src/lib/fancy-box.component.scss (line 1, column 1)
 @ ./libs/fancy-box/src/lib/fancy-box.component.ts 86:21-58
 @ ./libs/fancy-box/src/lib/fancy-box.component.stories.ts
 @ . sync libs\/.*\.stories.ts$|apps\/.*\.stories.ts$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./apps/app1/src/app/components/sparklines/sparklines.component.scss
Module build failed (from ./node_modules/@storybook/angular/node_modules/sass-loader/lib/loader.js):

@import 'variables';
^
      Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
      in /Users/delin/sandbox/nrwl-nx-workspace-demo/apps/app1/src/app/components/sparklines/sparklines.component.scss (line 1, column 1)
 @ ./apps/app1/src/app/components/sparklines/sparklines.component.ts 44:21-59
 @ ./apps/app1/src/app/components/sparklines/sparklines.component.stories.ts
 @ . sync libs\/.*\.stories.ts$|apps\/.*\.stories.ts$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

Steps to reproduce

git clone https://github.com/dereklin/nrwl-nx-workspace-demo.git git checkout trying-storybook-with-ng6 npm i npm run storybook

Please provide necessary steps for reproduction of this issue. Describe the exact steps a maintainer has to take to make the problem occur. If the problem is non-trivial to reproduce, please link a repository or provide some code snippets.

(A screencast can be useful for visual bugs, but it is not a substitute for a textual description.)

Please specify which version of Storybook and optionally any affected addons that you’re running

"@storybook/addon-actions": "4.0.0-alpha.10",
"@storybook/addon-links": "4.0.0-alpha.10",
"@storybook/addon-notes": "4.0.0-alpha.10",
"@storybook/addon-options": "4.0.0-alpha.10",
"@storybook/angular": "4.0.0-alpha.10",

Affected platforms

• If UI related, please indicate browser, OS, and version
• If dependency related, please include relevant version numbers
• If developer tooling related, please include the platform information

Screenshots / Screencast / Code Snippets (Optional)

// code here

End bug report support request - delete the rest below

If you are creating a issue to track work to be completed, start here:

Work summary

Please provide a description of the work to be completed here - Include some context as to why something needs to be done and link any related tickets.

Where to start

Please list the file(s) a contributor needs to figure out where to start work and include any docs or tutorials that may be applicable.

Acceptance criteria

Please include a checklist of the requirements necessary to close this ticket. The work should be narrowly scoped and limited to a few hours worth by an experienced developer at the most.

Who to contact

Add yourself and/or people who are familiar with the code changes and requirements. These people should be able to review the completed code. End work issue - please tag this issue with the correct status and type labels

Please note:

I added this into webpack.config.js:

`` { test: /.scss$/, use: [ { loader: ‘style-loader’ }, { loader: ‘css-loader’ }, { loader: ‘sass-loader’, options: { includePaths: [${appsPath}/app1/src/styles] } } ] }

https://github.com/dereklin/nrwl-nx-workspace-demo/blob/trying-storybook-with-ng6/.storybook/webpack.config.js

[laverix]

I have the same issue

[dereklin]

@igor-dv I am not sure if you can import a .scss file from within a .js file. Do you have examples for that?

Do you know what is the equivalent syntax in webpack.config.js for:

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

?