Usage of resources path in outputed CSS

[JONMARSHALDEV]

hi, i'm stuck in a problem, ..trying build those examples... "hello-world"..:
1.
in output css "urls" without quotes in production mode:
@font-face { font-family: "Material Icons"; src: url(/assets/fonts/material-icons.woff2) format("woff2"), url(/assets/fonts/material-icons.woff) format("woff"); ... }
.header { background-image: url(/assets/img/header.4fe56ae8.png); ... }

is it possible to get something like:
background-image: url("/assets/img/header.4fe56ae8.png");

• i use path's for fonts and images in scss like:
  background-image: url("~Images/about-logo.png");
• in webconfig output path specified as:
  filename: 'assets/img/[name].[hash:8][ext]',

-- when project builds,
in css path specified as:
background-image: url(assets/img/about-logo.0b88ec0f.png);

--but it must be like:
background-image: url(../img/about-logo.0b88ec0f.png);
and quotes... missing...

i'm using windows 10 x64
latest pug-plugin, webpack, chrome Browser

br, John

[webdiscus]

1. pug-plugin did not affect how url argument is compiled with or without quotes. You should see it by scss-loader or css-loader.
   "Missing" quotes in url(/path/to/image.png) is not an issue, it is standard of CSS. Quotes are optional.

[webdiscus]

2. the compiled background-image: url(assets/img/about-logo.0b88ec0f.png); is absolutely correct.
   The output filename is compiled as path.join(publicPath, getResult('assets/img/[name].[hash:8][ext]'))

If you need, you can specify the publicPath option by output in Webpack. But, note, the publicPath should not be relative like ../. It wrong way.

[webdiscus]

What problem do you have with hello-world?
The project not being built? Do you see any error messages? If not, then all is right.

[JONMARSHALDEV]

the problem is:
-after building project, u have next structure:

index.html
  assets/css/style.css ( which have path for image url("assets/img/image.jpg") )
  assets/img/image.jpg

but!
those didn't load resources.
in such case CSS file must be next to HTML file, like:

index.html
style.css
  assets/img/image.jpg

IF CSS file placed in subfolder, it looking for resources, rely to it's own path, so, to load resource, it expects, that images must be in:

index.html
  assets/css/style.css
             assets/img/image.jpg

so.
for the structure 1. which is configured in example, the path for image, must be specified, in such case, that css look above in folder structure:
4.

index.html
  assets/css/style.css ( which have path for image url("../img/image.jpg") )
  assets/img/image.jpg

did u checked builded dist files?
CSS can't look up, cuz in release path for resources is absolute, but must be relative, --> ../
not: url("assets/img/image.jpg") <-- this u have, after build, which is not working for CSS
but: url("../img/image.jpg") <-- this must be, which is working for CSS, or full path for resource, including http.

did you check build files? try

[webdiscus]

Ah, yes, you're right.
The npm run build is to build for GitHub Page, so is commended in webpack.config.js

    output: {
      path: path.join(__dirname, 'dist'),
      // build for GitHub Page: https://webdiscus.github.io/pug-plugin/hello-world/
      publicPath: isProd ? '/pug-plugin/hello-world/' : '/', // <-- if is production then build for GitHub page with specific publicPath
      // output filename of scripts
      filename: 'assets/js/[name].[contenthash:8].js',
      chunkFilename: 'assets/js/[name].[id].js',
    },

I will add other command docs for GitHub page and build will be for dist.

[webdiscus]

@JONMARSHALDEV

I have updated the examples.

Start local app in browser

npm run start

Build to dist/

npm run build

Preview of dist/ in browser

npm run preview