Storybook: [email protected]: scss module parse failed: 'Unexpected character '@''

[amitport]

Issue details

I have a angular [email protected] app (no ejected webpack) and I can't write a story for components that use css import with a @ char.

Steps to reproduce

ng new app
cd app
getStorybook

write a component that use imports with '@' such as @import '~@angular/material/theming';
write a story for that component

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

• @storybook/[email protected]
• @storybook/[email protected]
• @storybook/[email protected]
• @storybook/[email protected]
• @storybook/[email protected]
• @angular/[email protected]
• @angular/[email protected]

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

[igor-dv]

Can you please check the v3.4.0-alpha.9?

[ndelangen]

Yeah we added scss support by default for angular right?

[amitport]

now I'm getting:

ERROR in ./src/root/app/common/breadcrumbs.component.ts
[tsl] ERROR in <project-path>\src\root\app\common\my-components.component.ts(24,12)
      TS2304: Cannot find name 'require'.
Child html-webpack-plugin for "index.html":

line 24 is the styleUrls

[igor-dv]

Yeah we added scss support by default for angular right?

Yeah, but more important is an integration with the css part of the angular-cli's webpack.config.

[igor-dv]

do you have a public repo with this issue?

[amitport]

https://github.com/amitport/storybook-issue-3165

ng new --minimal followed by getStorybook and using styleUrls

[igor-dv]

Adding @types/node as a devDep solved it form me

[amitport]

@igor-dv that does work,

1 so, this probably should be documented or added with getStrorybook
2 I'm getting an error from ng serve : ERROR in node_modules/@storybook/angular/index.d.ts(31,44): error TS2304: Cannot find name 'NodeRequire'.
(seems that @angular/[email protected] + storbybook is a little broken- I can add this in a different issue though)

[igor-dv]

I think you need to exclude stories from your regular tsconig, and add a custom tsconfig to the .storybook dir that overrides this exclusion.

[amitport]

adding

"exclude": [
    "test.ts",
    "**/*.spec.ts",
    "stories"
  ]

to src/tsconfig.app.json seems to work

[DmitryEfimenko]

for me just stories didn't work. Had to do "**/*.stories.ts"

[igor-dv]

@amitport is probably using the stories dir to put all the stories in.