question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How add to @nrwl/storybook fonts or assets?

See original GitHub issue

How add to library with @nrwl/storybook fonts or assets?

Expected Behavior

The file-loader inside webpack.config should load files with fonts or property assets for @nrwl/storybook:storybook should be added

Current Behavior

Configuration for @nrwl/storybook doesn’t allows me to provide any assets property, also when I provide file-loader inside webpack.config it just omit it…

Context

Webpack file-loader:

    {
      test: /\.(woff|woff2)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            outputPath: (url, resourcePath, context) => {
              console.log('url', url);
              console.log('resourcePath', resourcePath);
              console.log('context', context);
              // Anything printed; in 'Sources -> webpack' is also missed
              return `assets/${url}`;
            },
          }
        }
      ],
      include: path.resolve(__dirname, '../src/assets/')
    }

Font use inside scss file:

@font-face {
  font-family: 'FontName';
  // src: url('^assets/fonts/FontName.woff2') format('woff2'), url('^assets/fonts/FontName.woff') format('woff'); // <-- The same
  src: url('/assets/fonts/FontName.woff2') format('woff2'), url('/assets/fonts/FontName.woff') format('woff');
  font-weight: $font-weight-regular;
}

NX Report

@nrwl/angular : 9.0.2 @nrwl/cli : 9.0.2 @nrwl/cypress : 9.0.2 @nrwl/eslint-plugin-nx : Not Found @nrwl/express : Not Found @nrwl/jest : 9.0.2 @nrwl/linter : Not Found @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/react : Not Found @nrwl/schematics : Not Found @nrwl/tao : 9.0.2 @nrwl/web : Not Found @nrwl/workspace : 9.0.2 typescript : 3.7.5

angular.json

"storybook": {
          "builder": "@nrwl/storybook:storybook",
          "options": {
            "uiFramework": "@storybook/angular",
            "port": 4400,
            "config": {
              "configFolder": "libs/shared/library-name/.storybook"
            }
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          }
        },

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
antoniojpscommented, Feb 20, 2021

@Chartieer The staticDir worked with the path related to the workspace directory, here’s my settings:

"storybook": {
  "executor": "@nrwl/storybook:storybook",
  "options": {
    "uiFramework": "@storybook/react",
    "port": 4400,
    "staticDir": ["libs/ytrank-components/public"],
    "config": { "configFolder": "libs/your-lib/.storybook" }
  },
  "configurations": { "ci": { "quiet": true } }
}
2reactions
Chartieercommented, Sep 15, 2020

This works

"storybook": {
          "builder": "@nrwl/storybook:storybook",
          "options": {
            "uiFramework": "@storybook/react",
            "port": 4400,
            "staticDir": ["public"],
            "config": {
              "configFolder": "libs/*_ya-lib_*/.storybook"
            }
          },…
Read more comments on GitHub >

github_iconTop Results From Across the Web

Images, fonts, and assets - Storybook - JS.ORG
Components often rely on images, videos, fonts, and other assets to render as the user expects. There are many ways to use these...
Read more >
Adding Images, Fonts, and Files - Nx
Adding Images, Fonts, and Files. With Nx, you can import assets directly from your TypeScript/JavaScript code. import React from 'react'; import logo from...
Read more >
How to add font-face in storybook in nx app? - Stack Overflow
My app is built using React and NX. I am trying to add @font-face in storybook using preview-head.html file. This is my font-face....
Read more >
Add Custom fonts to Storybook - YouTube
Add Custom fonts to Storybook Components.Code: https://github.com/codeReview-youtube/ story -custom-fontFollow Code Review on Twitter: ...
Read more >
Create Nx Libs with Assets | juri.dev
Hi, in the new version of nrwl workspace there is no angular.json file , where should i put the configurations of shared assets...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found