Angular CLI + SCSS + url(...) issue

[kroeder]

Bug or support request summary

Hey,

per default storybook handles angular pretty well but we recently moved from less to scss and now url(...) with relative paths don't work anymore. Then I found this: https://github.com/webpack-contrib/sass-loader#problems-with-url

I tried to extend the webpack defaultConfig as described in the storybook documentation but then I ran into this vuejs-templates/webpack-simple#107 (comment)

What should I do now? Is it possible to integrate https://github.com/bholloway/resolve-url-loader in your default scss webpack build step (if this is really the fix.. since I am an angular developer I barely know how to configure webpack :) )?

Steps to reproduce

• Create a project with storybook.
• Load a styles.css with e.g. @import 'fonts/fonts.scss'
• Add a font-face or anything that uses url

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'),
  url('opensans/v15/open-sans-v15-greek-ext_vietnamese_cyrillic_cyrillic-ext_latin_greek_latin-ext-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('opensans/v15/open-sans-v15-greek-ext_vietnamese_cyrillic_cyrillic-ext_latin_greek_latin-ext-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

• Run storybook - build process should fail with

// styles.scss imports fonts.scss and url(...) should not be resolved from the styles.scss path
C:\...\src\lib\styles.scss:15:77: Can't resolve 'opensans/v15/open-sans-v15-greek-ext_vietnamese_cyrillic_cyrillic-ext_latin_greek_latin-ext-300italic.woff' in '...\src\lib'

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

    "@storybook/addon-actions": "3.4.1",
    "@storybook/addon-links": "3.4.1",
    "@storybook/addon-notes": "3.4.1",
    "@storybook/addon-options": "3.4.1",
    "@storybook/addon-storysource": "3.4.1",
    "@storybook/addons": "3.4.1",
    "@storybook/angular": "3.4.1",

[danielduan]

while we do try to include sensible defaults, we can't possibly support every possible config in webpack

please follow the extend mode guide here to add your own webpack plugin to Storybook:
https://storybook.js.org/configurations/custom-webpack-config/

[igor-dv]

Since the 3.4 version, storybook integrates with the styling part of the angular-cli. Can you share you webpack.config.js?

[kroeder]

@igor-dv I do not use any custom webpack.config.js - I tried to use the full mode in order to get this running but failed when I tried to add a scss loader to the defaultConfig because there already was a scss loader (see vuejs-templates/webpack-simple#107 (comment))

Here's my current scenario

• .angular-cli

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

• no custom webpack.config.js
• I have a styles.scss that imports all the other scss
• styles.css imports a @import "styles/fonts";
• fonts.scss imports `@import 'fonts/opensans';
• opensans.scss imports

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'),
  url('opensans/v15/open-sans-v15-greek-ext_vietnamese_cyrillic_cyrillic-ext_latin_greek_latin-ext-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('opensans/v15/open-sans-v15-greek-ext_vietnamese_cyrillic_cyrillic-ext_latin_greek_latin-ext-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

• Starting storybook throws an error:

// styles.scss imports fonts.scss and url(...) should not be resolved from the styles.scss path
C:\...\src\lib\styles.scss:15:77: Can't resolve 'opensans/v15/open-sans-v15-greek-ext_vietnamese_cyrillic_cyrillic-ext_latin_greek_latin-ext-300italic.woff' in '...\src\lib'

[kroeder]

nvm - seems to be angular-cli related
Fixed it this way: angular/angular-cli#6599 (comment)