How to set the correct path to files connected via url in scss with Output Path option

[G1msky]

Hello @webdiscus !

Tried pug-plugin, really liked it, thanks.
But there was a problem with image/icon file paths connected in scss using:
background: url(../images/bg-blue.svg);

When setting outputPath in the plugin :

new PugPlugin({
	pretty: true,
	css: {
		enabled: true,
		test: /\.(css|scss|sass|less|styl)$/,
		outputPath: 'assets/css/',
	},
}),

My styles and images rules:

{
  test: /\.(scss|css)$/,
  use: ['css-loader', 'postcss-loader', 'sass-loader'],
},
{
  test: /\.(png|jpg|jpeg|ico|svg)/,
  type: 'asset/resource',
  generator: {
  // output filename of images
  filename: 'assets/images/[name].[hash:8][ext]',
  },
},

Output options:

output: {
  path: path.join(__dirname, 'dist/'),
  filename: 'assets/js/[name].js',
  path: __dirname + '/dist',
  assetModuleFilename: path
	  .join('assets/images', '[name][ext]')
	  .replace(/\\/g, '/'),
  clean: true,
}

Regarding the file structure of the build - everything is fine, as I need to

The css is generated in the right, specified folder, but the paths to the icons remain unchanged relative to the root, like this :
background:url(assets/images/bg-blue.73cdd532.svg);

But I need a file relative to the specified directory:
background: url(../images/bg-blue.73cdd532.svg);

Without outputPath it works, but that's not what I need

[webdiscus]

Hi @G1msky,

try to remove the output . assetModuleFilename, because this option override right generated ../images/bg-blue.73cdd532.svg path.

Important:

new PugPlugin({
	pretty: true,
	css: {
		//enabled: true, // omit it, defaults is enabled
		//test: /\.(css|scss|sass|less|styl)$/, omit it, defaults is the same
		//outputPath: 'assets/css/', // instead of the outputPath, use the filename including the path
                filename: 'assets/css/[name].[contenthash:8].css',
	},
        js: {
                filename: 'assets/js/[name].[contenthash:8].js', // <= define JS output file HERE, not in output.filename
        },
}),

[G1msky]

Hi @G1msky,

try to remove the output . assetModuleFilename, because this option override right generated ../images/bg-blue.73cdd532.svg path.

My fault for not mentioning that I tried this solution. Now I tried it again, the path is still not overwritten, remains as :
file:///D:/Projects/Project_name/dist/assets/css/assets/images/bg-blue.73cdd532.svg
And the path where the file is located looks like this, without assets/css/ :
file:///D:/Projects/Project_name/dist/assets/images/bg-blue.73cdd532.svg

I also tried disabling the rule for the test: /\.(png|jpg|jpeg|ico|svg)/, : the images were generated in the root, but css does not see this, it started pointing as if it was on the same level as them, also in the root, just the file name.

[G1msky]

Important:

new PugPlugin({
	pretty: true,
	css: {
		//enabled: true, // omit it, defaults is enabled
		//test: /\.(css|scss|sass|less|styl)$/, omit it, defaults is the same
		//outputPath: 'assets/css/', // instead of the outputPath, use the filename including the path
                filename: 'assets/css/[name].[contenthash:8].css',
	},
        js: {
                filename: 'assets/js/[name].[contenthash:8].js', // <= define JS output file HERE, not in output.filename
        },
}),

That's the right solution, thank you very much.
Just need to clear the outputPath,

The working setup looks like this :

new PugPlugin({
  pretty: true,
  css: {
	  filename: 'assets/css/[name].[contenthash:8].css',
  },
  js: {
	  filename: 'assets/js/[name].[contenthash:8].js', 
  },
}),