Preact-cli: npm run build , output background:url in style.css for pash is absolute ， i need relative for path , no config

[sowdf]

npm run build , output background:url in style.css for path is absolute ， i need relative for path , no config

[sowdf]

I have to change the preact-cli file for the job, it is very troublesome

[developit]

Can you show what you changed?

[jbelis]

I think I have the same question. The build produces an index.html with absolute paths for assets (js, css, images). Examples:

<link href="/style.0bacc.css" rel="stylesheet">
<script defer="defer" src="/bundle.b1985.js">

This means you have to deploy at the root of your web server which is not always the case. Is there a recipe to change this, ideally by stripping the leading / ?

[thangngoc89]

@jbelis it comes from webpack. Ideally, you can edit webpack publicPath config. But not sure if we hardcoded it anywhere in the cli. Could you give it a try?

[jbelis]

It is hardcoded in src/lib/webpack/webpack-client-config.js and src/lib/webpack/webpack-server-config.js

[thangngoc89]

@jbelis we provided an escape hatch for you. You can read more about configuring webpack config here https://github.com/developit/preact-cli#webpack

[garrows]

Setting preact.config.js file to this fixed it for me.

export default function (config, env, helpers) {
  if (env.production) {
    config.output.publicPath = '';
  }
}

[developit]

It's best to use an absolute URL for these so that they don't break when using client-side routing.

[BoldBigflank]

@garrows answer works except for prerendered urls. any of those will create a file in its own folder like viewer/index.html and the reference to the bundle.js will be broken.

[ForsakenHarmony]

feel free to open a new issue