I’m getting started with Coldbox Elixir and so far it’s amazing! I love being able to fire up npm run watch and it will automatically compile my SCSS and refresh the browser via browsersync. However, I’m a little confused as to how I should proceed with using images in my Elixir projects.
Here’s what my folder structure currently looks like (simplified for this example):
/includes/
/css/ // compiled/minified css goes here
/images/ // webpack likes to put images here (sometimes)
/js/ // compiled/minified js goes here
/resources
/js/ // my raw source javascript files
/sass/ // my raw source scss files
/static/
/img/ // my original image files
When I place a reference to an image in my scss file like this:
.header {
background-image: url( ‘…/…/static/img/header-gradient.png’ );
}
Webpack makes a copy of the image to /includes/images/ and rewrites the rendered css file to point to the proper image.
However, when I make a subsequent change to my scss file, webpack deletes the image in /includes/images/ during the cleanup process and never re-creates it thus breaking the compiled CSS link.
This behavior makes me think that I might be treating images wrong. I don’t see any reason why a duplicate image file needs to be generated. Is there a way to use the existing images in my /static/img/ folder and have webpack automatically change the image reference when compiling CSS without making a copy of the image? In other words, it would be great if Webpack would simply find the reference in the SCSS file:
url( ‘…/…/static/img/header-gradient.png’ )
… and change it to
url( ‘…/static/img/header-gradient.png’ )
… so it stays relative to the compiled css file.
The problem I see with making duplicate copies images used in CSS files is that some images will remain in my /static/img/ folder, and any image that is referenced in CSS gets duplicated to /includes/images/. This behavior feels like it would make keeping images organized more difficult and also wastes space.
Here is my webpack.config file for reference:
const elixir = require( “coldbox-elixir” );
const webpack = require( “webpack” );
elixir.config.mergeConfig({
plugins: [
// globally scoped items which need to be available in all templates
new webpack.ProvidePlugin({
$ : “jquery”,
jQuery : “jquery”,
“window.jQuery”: “jquery”,
“window.$” : “jquery”,
“Vue” : [“vue/dist/vue.esm.js”, “default”],
“window.Vue” : [“vue/dist/vue.esm.js”, “default”]
})
],
devtool: “source-map”
});
/*
Elixir Asset Management
Elixir provides a clean, fluent API for defining some basic Gulp tasks
for your ColdBox application. By default, we are compiling the Sass
file for our application, as well as publishing vendor resources.
*/
module.exports = elixir( mix => {
mix.browserSync({
proxy: “localhost:62351”,
notify: false
});
// Mix App styles
mix
.js(
“app.js”,
{
name: “app”,
entryDirectory: “resources/js/”
}
)
.sass(
“app.scss”,
{
name: “app”,
entryDirectory: “resources/sass/”
}
)
.js(
[
“node_modules/jquery/dist/jquery.min.js”,
“node_modules/bootstrap/dist/js/bootstrap.min.js”
],
{
name : “vendor.min”,
entryDirectory : “”
}
);
} );