Success! I finally cracked the code.
To begin with, a quick peek at the Webpack configuration structure can be achieved by running yarn storybook --debug-webpack.
Upon thorough investigation, it became evident that the publicPath was set to "", indicating that assets needed to reside in the .storybook directory under subfolders /img and /fonts.
But why?
This is because the html output rendering the Storybook app shares the same path as injected CSS files, one of which originates from the sass-loader.
The remedy:
webpackFinal: async (config, { configType }) => {
// Integrate Sass into Storybook
config.module.rules.push({
test: /\.scss$/,
include: path.resolve(__dirname, "../styles"),
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
options: {
url: false, // Crucial flag ** refer explanation
},
},
{
loader: "sass-loader",
},
],
});
// Transfer all assets to publicPath
config.plugins.push(
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, "../public/fonts"),
to: "./fonts",
},
{
from: path.resolve(__dirname, "../public/img"),
to: "./img",
},
],
})
);
return config;
},
options {url: false}
This setting resolved my predicament. Essentially, when utilizing:
// Illustrative example
.bg-pattern-2 {
background-image: linear-gradient(to bottom, transparent 0%, $black 100%), url('#{$path-to-img}/patterns/pattern-2.png');
}
the css-loader generates its own URLs, causing mismatches in image paths within the injected CSS.
By deactivating this feature, we can then relocate these assets using the copy-webpack-plugin to the publicPath of webpack, enabling everything to function seamlessly.