The imported font file cannot be packaged in the dist folder.

[hanbingxu82]

I introduced font files in the react project built by create react library, such as: woff/. woff2/. ttf。

But when I use

"build": "microbundle-crl --css-modules false --no-compress --format modern,cjs",

"start": "microbundle-crl --css-modules false watch --no-compress --format modern,cjs",

When these two commands package my project, they do not package the font file into the dist directory, resulting in failure to find the corresponding font file

How should I configure to solve the current problem?

[rschristian]

I assume you're just referencing the font file through some CSS, like:

@font-face {
  font-family: myFont;
  src: url('./my-font.otf') format('otf');
}

If so, just copy the font where you'd like it post-build.

"build": "microbundle-crl --css-modules false --no-compress --format modern,cjs && cp my-font.otf build/"

microbundle-crl is a fork, by the way. You can find it here: https://github.com/transitive-bullshit/microbundle

[developit]

(might also be worth checking if this issue is fixed in Microbundle proper, rather than microbundle-crl)

[rschristian]

Oh, definitely doesn't work automatically in Microbundle proper, and, to my knowledge, it never has. Any reference of another asset in CSS needs some copying after the fact.

Not sure if you want to support that or just stay away from any additional CSS processing.

[developit]

IMO that should be out of scope.

[hanbingxu82]

Thank you very much

After using the following command line copy statement, I successfully solved this problem

microbundle-crl --css-modules false watch --no-compress --format modern,cjs & cp -r src/packages/Icon/fontcss/* ./dist

[rschristian]

Just a heads up: You likely want that command to be microbundle-crl --css-modules false watch --no-compress --format modern,cjs && cp -r src/packages/Icon/fontcss/* ./dist (notice the double ampersand) rather than what you have.

& means run the left command in the background. This will be an issue if you do not have the dist/ directory already created, such as when you do a fresh clone of the project or if you delete it to do a fresh build. Because Microbundle runs in the background, your copy command could attempt to copy to a directory that doesn't exist and will error out before Microbundle has had a chance to create that directory.

&&, on the other hand, will run the right command only after the left has finished. This way you can ensure Microbundle has finished, the dist/ directory exists, and it's alright to copy your assets over.

[hanbingxu82]

Oh, thank you. I did encounter the problem you said after I deleted the dist file.

I now have two scripts, one is start and the other is build.

Start script: it is used to monitor the function of saving and packaging in real time. Therefore, when I use the start script to execute the project, because the program has not ended, all the command lines on the & & right have not been executed

Build script: after changing to & & connection copy command, no error will be reported