how to generate css in the src directory(eg: src/less) and image in the outside of src?

[overarchingSky]

I think the fallowing way is not elegant enough:

new SpritesmithPlugin({ src: { cwd: path.resolve(__dirname, "../static/images"), glob: "*.png" }, target: { image: path.resolve(__dirname, "../static/sprite/sprite.png"), css: path.resolve(__dirname, "../src/less/sprite/sprite-png.less") }, apiOptions: { cssImageRef: "~sprite.png" } })

the source images is placed in the static directory which is outside of src, and the generated css in src/less/sprite.

I try to run webpack in this config,but error with:

This dependency was not found: "* sprite.png in ./\~/_css-loader@0.28.7@css-loader?{"minimize":false,"sourceMap":false}!./\~/_vue-loader@13.6.1@vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-358c3dbb","scoped":false,"hasInlineConfig":false}!./\~/_less-loader@4.0.5@less-loader/dist/cjs.js?{"sourceMap":false}!./\~/_vue-loader@13.6.1@vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/pages/login.vue"

so, how to configure apiOptions or other options can make it work well?

[mixtur]

It is probably because in generated less file ~sprite.png could not be resolved by webpack. You can read more on module resolving here. Note that it is not ./sprite.png, but ~sprite.png. Also note that what this plugin emits is not meant to be used as final asset. It better be going through file-loader, image-webpack-loader etc. Therefore there is no need to move it to "static/images".

[overarchingSky]

thanks