How to set where to save assets with webpack 5 using react-styleguidist

Question

Im generating frontend documentation of a react project using react-styleguididst. I'm facing a problem related to webpack, which is mainly that during the build, assets files used on stylesheet (woff, woff2, eot, svg ...etc) are bundled and stored on the main project folder, thus fonts and images are not shown because stylesheet expects to find these files at static/css:

Before continue 2 important things; 1 - I am using react-scripts 5.0.0 webpack.config to run this build 2 - However it looks like styleguidist is extending this config and modifying it.

I have tried all type of suggestions, for instance setting this rule:

webpackConfig.module.rules.push({
      test: /\.(woff(2)?|ttf|eot)$/,
      type: 'asset/resource',
      generator: {
        emit: false,
      },
    })  

or something like this:

{
   test: /\.(woff(2)?|ttf|eot)$/,
   loader: "file-loader",
   options: {
       name: "asset/resource/[name].[ext]"
   }
}

but there is no way to have that files in any different folder, so I guess if there is something else to try or maybe if it is possible to copy-paste these files to its correct destination as the last step of build, when all files al generated.

Thanks for your help

Answer 1

Found the solution by setting this webpack config at styleguide.config.js:

  dangerouslyUpdateWebpackConfig(webpackConfig, env) {
    webpackConfig.output.publicPath = '/styleguide/'
    webpackConfig.output.assetModuleFilename = 'static/css/[hash][ext][query]'
    webpackConfig.cache = false
    return webpackConfig
  },