copy fonts

Open
#121 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
css, javascript, nextjs
Domain
build-system, tooling

Research direction

Start by reproducing the shown postcss-url configuration against the relative font URL in node_modules/my-styleguide/dist/build/styleguide.css. Trace how basePath and assetsPath are resolved and verify whether the expected result is copied fonts under /.next/static/ with rewritten URLs; the issue is done when that build completes without the reported missing-module error.

Written by the indexing model from the issue text.

Description

Hi, i know that you do not encourage the use of copy, but i have a tricky need.
I have a node_module with a css file and relative font urls :
@font-face{font-family:"Avenir";src:url("./fonts/avenir-lighter.woff") format("woff")}

My app uses Nextjs and with style-loader + css-loader, my css module is well integrated to the output /.next/static/style.css but font files url are not copied magically to that folder.

So i want to use postcss-url to copy all fonts files to /.next/static/ and adapt url to point to that files.
I try that :

module.exports = {
  plugins: [
    require('postcss-url')({
      url: 'copy',
      basePath: `${path.resolve('node_modules/my-styleguide')}/dist/build/`,
      assetsPath: '/.next/static/',
    }),
  ]
};

Sadly, it doesn't work and i get the following error :
These relative modules were not found:

  • ../../../../.next/static/fonts/avenir-bold-black-heavy.woff in ./node_modules/my-styleguide/dist/build/styleguide.css

Have you got any idea ?

Thx

Dominant language
JavaScript
Stars
383
Forks
58
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from postcss/postcss-url

All issues in postcss/postcss-url

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.