Storybook: Include fonts from .scss file

[vladimircores]

Describe the bug
Fonts can't be found.

To Reproduce
I have fonts imported in style.css:

@include font-face("Graphik", "/fonts/Graphik-Web-Semibold", bold, normal, woff);
@include font-face("Graphik", "/fonts/Graphik-Web-Regular", normal, normal, woff);
@include font-face("Graphik", "/fonts/Graphik-Web-Medium", 400, normal, woff);

This is a part of the structure of the app

And I import this style.css into the app with vue.config and webpack.config in the root of the app:

webpack.config.js:

{
        test: /\.s(c|a)ss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('node-sass'),
              sassOptions: {
                fiber: require('fibers'),
              },
            },
          }
        ]
      }

vue.config:

css: {
    requireModuleExtension: false,
    loaderOptions: {
      scss: {
        prependData: `
          @import "@/assets/style.scss";
        `
      }
    }
  },

And it works for style, but no fonts :

start.js:420 GET http://localhost:6006/fonts/Graphik-Web-Medium.woff net::ERR_ABORTED 404 (Not Found)

Expected behavior
Fonts from included style file loadedcorrectly

System:
Environment Info:
System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Binaries:
Node: 11.0.0 - ~/.nvm/versions/node/v11.0.0/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v11.0.0/bin/npm
Browsers:
Chrome: 80.0.3987.149
Safari: 13.1
npmPackages:
@storybook/addon-actions: ^5.3.14 => 5.3.14
@storybook/addon-docs: >=5.3.0 => 5.3.14
@storybook/addon-knobs: >=5.3.0 => 5.3.14
@storybook/addon-links: >=5.3.0 => 5.3.14
@storybook/addon-notes: >=5.3.0 => 5.3.14
@storybook/vue: >=5.3.0 => 5.3.14

I also added file-loader to webpack.config but this does not help:

{
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [{
          loader: 'file-loader',
          include: path.resolve(__dirname, '@/assets/fonts'),
          options: {
            outputPath: '/fonts/'
          }
        }]
      }

[fallemand]

I had the problem after migrating to 5.3.
I was importing a storybook.scss for storybook using this hack:

import '!vue-style-loader!css-loader!sass-loader!./storybook.scss';

But I had to add resolve-url-loader so It could get the right paths for the fonts

import '!vue-style-loader!css-loader!resolve-url-loader!sass-loader!./storybook.scss';

Now it's working fine.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[peicodes]

I am experiencing the same issue. I don't understand what this workaround is doing. What is storybook.scss?

[PhilippeRoy]

@peicodes stoybook.scss is a custom sass file. You could name it anything you want. From the above import, the file is next to config.js or preview.js