Closed G1msky closed 1 year ago
Hi @G1msky,
try to remove the output . assetModuleFilename
, because this option override right generated ../images/bg-blue.73cdd532.svg
path.
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
},
}),
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.
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',
},
}),
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 :
My styles and images rules:
Output options:
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