My application structure is set up like this:
/src
/app.js
/styles.css
/images
/img.png
The content of the app.js file is as follows:
const styles = require('./styles.css');
console.log(styles) // => I want a URL to the CSS file under the public folder
The content of the src/styles.css file looks like this:
.element {
background: url(./images/img.png);
}
Therefore, the JavaScript file requires the CSS file, and the CSS file requires the PNG file.
I require all the files to be exported to the public folder:
public/app.js
const styles = 'styles.css' // => path to public/styles.css
console.log(styles)
pubic/styles.css
.element {
background: url(img.png); /* path to public image file */
}
public/img.png (source image copy)
The specific filenames are not significant. What truly matters is the result in the public folder. The CSS file is exported independently with the correct path to the image. The JS file holds the path of the public CSS file.
If there were no image included, the file-loader could be utilized to import the CSS file. However, in my scenario, the CSS file must first go through the css-loader for the url() path resolution.
Implementing the css-loader prior to the file-loader creates issues because it returns JS code instead of CSS.
Is there a method to create a pipeline that achieves the desired outcome?